:root {
  --vton-bg: #04091a;
  --vton-bg-soft: #071128;
  --vton-panel: rgba(9, 18, 43, 0.88);
  --vton-panel-strong: rgba(7, 15, 37, 0.97);
  --vton-line: rgba(151, 172, 235, 0.15);
  --vton-line-strong: rgba(142, 164, 255, 0.31);
  --vton-text: #f7f8ff;
  --vton-muted: #9eaccb;
  --vton-soft: #c5ceea;
  --vton-violet: #826cff;
  --vton-blue: #45a4ff;
  --vton-cyan: #2dd4bf;
  --vton-gold: #f2bd66;
  --vton-pink: #ed73c3;
  --vton-success: #55e4a1;
  --vton-warning: #f4bd4f;
  --vton-danger: #ff718f;
  --vton-radius: 24px;
  --vton-shadow: 0 28px 80px rgba(0, 5, 21, 0.45);
  --nav-height: 74px;
  --dock-height: 86px;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--vton-bg); }
body { margin: 0; min-height: 100vh; background: var(--vton-bg); color: var(--vton-text); overflow-x: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.vton-page::selection { background: rgba(130, 108, 255, .42); color: #fff; }

.vton-ambient { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 48% -10%, rgba(69, 96, 197, .18), transparent 36%), linear-gradient(180deg, #04091a 0%, #050b1e 58%, #030714 100%); }
.vton-ambient-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .55; }
.vton-ambient-orb-a { width: 650px; height: 650px; left: -330px; top: 16%; background: radial-gradient(circle, rgba(129, 86, 255, .2), transparent 68%); animation: ambientDriftA 19s ease-in-out infinite alternate; }
.vton-ambient-orb-b { width: 720px; height: 720px; right: -390px; top: 8%; background: radial-gradient(circle, rgba(31, 209, 190, .14), transparent 69%); animation: ambientDriftB 23s ease-in-out infinite alternate; }
.vton-ambient-grid { position: absolute; inset: 0; opacity: .21; background-image: linear-gradient(rgba(137, 158, 225, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 158, 225, .06) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000 0, transparent 85%); }
.vton-ambient-thread { position: absolute; width: 52vw; height: 1px; background: linear-gradient(90deg, transparent, rgba(128, 111, 255, .4), transparent); transform: rotate(-18deg); filter: drop-shadow(0 0 12px rgba(100, 96, 255, .36)); }
.vton-ambient-thread-a { left: -12vw; top: 36%; animation: threadPulse 7s ease-in-out infinite; }
.vton-ambient-thread-b { right: -12vw; top: 58%; transform: rotate(15deg); animation: threadPulse 9s 1.4s ease-in-out infinite; }

.vton-nav { position: fixed; inset: 0 0 auto; z-index: 100; min-height: var(--nav-height); padding: 0 clamp(18px, 4.4vw, 74px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(4, 9, 25, .83); border-bottom: 1px solid rgba(142, 166, 236, .13); box-shadow: 0 12px 42px rgba(0, 4, 18, .28); backdrop-filter: blur(20px) saturate(135%); }
.vton-brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.vton-brand-mark { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(95, 195, 255, .23); border-radius: 15px; background: linear-gradient(145deg, rgba(34, 77, 126, .42), rgba(7, 31, 48, .78)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.25); overflow: hidden; }
.vton-brand-mark::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.15), transparent 65%); transform: translateX(-80%); animation: brandShine 6s ease-in-out infinite; }
.vton-brand-mark img { width: 30px; height: 30px; object-fit: contain; }
.vton-brand-copy { display: grid; line-height: 1.05; }
.vton-brand-copy strong { font-size: 1.12rem; letter-spacing: .015em; }
.vton-brand-copy small { margin-top: 5px; color: #93a8d7; font-size: .58rem; font-weight: 800; letter-spacing: .22em; }
.vton-nav-links { display: flex; align-items: center; gap: 10px; }
.vton-nav-links > a, .vton-runtime-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(139, 158, 215, .15); border-radius: 13px; background: rgba(15, 28, 61, .55); color: #dfe6fb; text-decoration: none; font-size: .8rem; font-weight: 700; transition: .2s ease; }
.vton-nav-links > a:hover { transform: translateY(-1px); border-color: rgba(129, 112, 255, .42); background: rgba(41, 43, 94, .72); color: #fff; }
.vton-runtime-pill { border-color: rgba(45, 212, 191, .28); background: rgba(12, 78, 73, .23); color: #bffbed; }
.vton-runtime-pill.is-ready i { color: var(--vton-success); }
.vton-runtime-pill.is-error { border-color: rgba(255, 113, 143, .28); background: rgba(109, 28, 48, .24); color: #ffd0db; }

.vton-main { width: min(1840px, calc(100% - 42px)); margin: 0 auto; padding: calc(var(--nav-height) + 34px) 0 calc(var(--dock-height) + 54px); }

.vton-hero { position: relative; min-height: 470px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr); align-items: center; gap: clamp(36px, 5vw, 90px); padding: clamp(36px, 5.4vw, 82px) clamp(28px, 5vw, 76px); overflow: hidden; border: 1px solid rgba(136, 160, 238, .16); border-radius: 34px; background: linear-gradient(135deg, rgba(12, 28, 67, .9), rgba(7, 15, 38, .94) 52%, rgba(15, 27, 63, .92)); box-shadow: var(--vton-shadow), inset 0 1px rgba(255,255,255,.06); }
.vton-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 72% 36%, rgba(129, 105, 255, .18), transparent 28%), radial-gradient(circle at 84% 78%, rgba(45, 212, 191, .11), transparent 26%), linear-gradient(120deg, rgba(255,255,255,.025), transparent 35%); }
.vton-hero-copy { position: relative; z-index: 2; max-width: 880px; }
.vton-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #c3ceff; font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.vton-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--vton-cyan); box-shadow: 0 0 0 7px rgba(45,212,191,.1), 0 0 24px rgba(45,212,191,.75); }
.vton-hero h1 { max-width: 920px; margin: 18px 0 18px; color: #fff; font-size: clamp(2.35rem, 4.3vw, 5.15rem); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.vton-hero h1 em { color: transparent; font-style: normal; background: linear-gradient(90deg, #a897ff, #67c7ff 54%, #65e5c8); background-clip: text; -webkit-background-clip: text; }
.vton-hero-copy > p { max-width: 790px; margin: 0; color: #afbad6; font-size: clamp(.96rem, 1.15vw, 1.12rem); line-height: 1.75; }
.vton-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.vton-primary-action, .vton-secondary-action { min-height: 52px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 16px; cursor: pointer; font-weight: 800; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.vton-primary-action { border: 0; background: linear-gradient(115deg, #7c54ff, #496fff 48%, #2fb8f3); color: #fff; box-shadow: 0 17px 42px rgba(78, 77, 229, .35); }
.vton-secondary-action { border: 1px solid rgba(157, 176, 239, .22); background: rgba(15, 29, 65, .6); color: #e7ecff; }
.vton-primary-action:hover, .vton-secondary-action:hover { transform: translateY(-2px); box-shadow: 0 22px 46px rgba(55, 70, 190, .32); }
.vton-hero-trust { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; color: #8f9fbe; font-size: .76rem; font-weight: 650; }
.vton-hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.vton-hero-trust i { color: #89a4ff; }

.vton-hero-showcase { position: relative; z-index: 2; min-height: 360px; display: grid; place-items: center; }
.vton-hero-halo { position: absolute; width: min(420px, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(126, 108, 255, .19), rgba(45, 212, 191, .05) 40%, transparent 70%); filter: blur(2px); animation: haloBreathe 4.5s ease-in-out infinite; }
.vton-hero-garment { position: relative; z-index: 3; height: 385px; filter: drop-shadow(0 30px 28px rgba(0,0,0,.3)); animation: garmentFloat 5.2s ease-in-out infinite; }
.vton-hero-garment img { width: 100%; height: 100%; object-fit: contain; }
.vton-hero-orbit { position: absolute; inset: 8% 5%; z-index: 1; border: 1px solid rgba(123, 138, 230, .13); border-radius: 50%; transform: rotateX(68deg); }
.vton-hero-orbit::before, .vton-hero-orbit::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(83, 204, 207, .1); border-radius: inherit; }
.vton-hero-orbit::after { inset: 28%; }
.vton-hero-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #7d87ff; box-shadow: 0 0 22px currentColor; animation: orbitDot 7s linear infinite; }
.vton-hero-orbit i:nth-child(1) { top: 45%; left: -4px; }
.vton-hero-orbit i:nth-child(2) { top: 13%; right: 18%; animation-delay: -2.2s; background: #2dd4bf; }
.vton-hero-orbit i:nth-child(3) { bottom: 12%; right: 7%; animation-delay: -4.5s; background: #f2bd66; }
.vton-float-card { position: absolute; z-index: 4; min-width: 160px; padding: 12px 14px; border: 1px solid rgba(164, 179, 237, .18); border-radius: 16px; background: rgba(7, 16, 39, .79); box-shadow: 0 18px 48px rgba(0,0,0,.33); backdrop-filter: blur(16px); }
.vton-float-card span { display: block; color: #9bb0e7; font-size: .57rem; font-weight: 850; letter-spacing: .12em; }
.vton-float-card strong { display: block; margin-top: 4px; font-size: .82rem; }
.vton-float-card small { color: #7cdcbc; font-size: .64rem; }
.vton-float-card-a { left: 1%; top: 20%; animation: floatCardA 5s ease-in-out infinite; }
.vton-float-card-b { right: 0; bottom: 19%; animation: floatCardB 5.7s ease-in-out infinite; }
.vton-hero-metrics { position: absolute; z-index: 4; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; overflow: hidden; border: 1px solid rgba(139, 160, 229, .16); border-radius: 16px; background: rgba(7, 15, 37, .8); backdrop-filter: blur(12px); }
.vton-hero-metrics span { min-width: 78px; padding: 9px 12px; display: grid; text-align: center; border-right: 1px solid rgba(139, 160, 229, .12); }
.vton-hero-metrics span:last-child { border: 0; }
.vton-hero-metrics strong { font-size: .9rem; }
.vton-hero-metrics small { color: #8fa0c3; font-size: .57rem; }

.vton-mode-switch { width: min(760px, calc(100% - 36px)); margin: 24px auto 20px; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border: 1px solid rgba(142, 164, 231, .16); border-radius: 21px; background: rgba(7, 15, 36, .78); box-shadow: 0 16px 46px rgba(0,0,0,.23); backdrop-filter: blur(16px); }
.vton-mode-tab { min-width: 0; min-height: 64px; padding: 9px 12px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 16px; background: transparent; text-align: left; cursor: pointer; transition: .2s ease; }
.vton-mode-tab.is-active { border-color: rgba(132, 118, 255, .4); background: linear-gradient(140deg, rgba(97, 85, 220, .28), rgba(44, 80, 164, .22)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 30px rgba(30, 27, 99, .2); }
.vton-mode-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(111, 112, 233, .18); color: #b8c5ff; }
.vton-mode-tab span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.vton-mode-tab strong { font-size: .84rem; }
.vton-mode-tab small { overflow: hidden; color: #8494b8; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.vton-mode-tab b { padding: 5px 8px; border-radius: 999px; background: rgba(121, 141, 215, .09); color: #b2bfdd; font-size: .6rem; }

.vton-workspace { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(520px, 1.52fr) minmax(390px, 1.02fr); gap: 14px; align-items: stretch; }
.vton-panel { position: relative; min-width: 0; border: 1px solid var(--vton-line); border-radius: var(--vton-radius); background: linear-gradient(155deg, rgba(12, 23, 54, .93), rgba(6, 14, 34, .97)); box-shadow: 0 20px 60px rgba(0, 5, 20, .28), inset 0 1px rgba(255,255,255,.04); }
.vton-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vton-panel-heading > div { display: grid; gap: 5px; }
.vton-panel-heading span { color: #86a0e5; font-size: .62rem; font-weight: 850; letter-spacing: .12em; }
.vton-panel-heading h2 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.vton-panel-heading > i { color: #91aaff; }

.vton-person-panel { padding: 18px; display: flex; flex-direction: column; gap: 13px; }
.vton-person-drop { position: relative; min-height: 450px; display: grid; place-items: center; overflow: hidden; border: 1px dashed rgba(112, 143, 227, .34); border-radius: 20px; background: radial-gradient(circle at center, rgba(49, 74, 139, .19), transparent 55%), rgba(11, 24, 55, .52); cursor: pointer; transition: .22s ease; }
.vton-person-drop:hover, .vton-person-drop.dragging { border-color: rgba(111, 105, 255, .75); background-color: rgba(23, 38, 82, .65); }
.vton-person-drop input, .vton-garment-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vton-person-empty { max-width: 230px; padding: 24px 14px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.vton-upload-orbit { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 10px; border: 1px solid rgba(125, 142, 231, .25); border-radius: 50%; background: rgba(66, 84, 166, .13); color: #c6d1ff; }
.vton-upload-orbit::before { content: ""; position: absolute; inset: -11px; border: 1px dashed rgba(101, 121, 214, .15); border-radius: inherit; animation: spin 14s linear infinite; }
.vton-person-empty strong { font-size: .88rem; }
.vton-person-empty p { margin: 0; color: #8290af; font-size: .72rem; line-height: 1.6; }
.vton-upload-cta { margin-top: 5px; padding: 9px 13px; border-radius: 11px; background: linear-gradient(115deg, #7657ff, #4198f4); color: #fff; font-size: .68rem; font-weight: 800; box-shadow: 0 10px 28px rgba(79, 81, 219, .26); }
.vton-person-preview { width: 100%; height: 100%; object-fit: contain; transform: translateY(var(--person-y, 0)) scale(var(--person-s, 1)) rotate(var(--person-r, 0deg)); transition: transform .18s ease; }
.vton-person-file { position: absolute; inset: auto 12px 12px; padding: 7px 9px; overflow: hidden; border: 1px solid rgba(161, 180, 237, .13); border-radius: 10px; background: rgba(4, 10, 27, .76); color: #cbd5f5; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(8px); }
.vton-person-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vton-person-actions button, .vton-viewer-controls button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(137, 157, 217, .15); border-radius: 11px; background: rgba(17, 29, 61, .65); color: #cbd5ef; cursor: pointer; font-size: .68rem; font-weight: 750; transition: .18s ease; }
.vton-person-actions button:hover, .vton-viewer-controls button:hover { border-color: rgba(130, 117, 255, .43); color: #fff; transform: translateY(-1px); }
.vton-fit-controls { display: grid; gap: 9px; padding: 12px; border: 1px solid rgba(137, 157, 217, .11); border-radius: 16px; background: rgba(5, 12, 31, .38); }
.vton-fit-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vton-fit-title strong { font-size: .7rem; }
.vton-fit-title small { color: #7785a4; font-size: .56rem; }
.vton-fit-controls label { display: grid; grid-template-columns: 54px 1fr 34px; align-items: center; gap: 8px; color: #8998b9; font-size: .61rem; }
.vton-fit-controls input[type=range] { width: 100%; accent-color: #7b6cff; }
.vton-fit-controls output { color: #cdd6f3; font-size: .59rem; text-align: right; }
.vton-photo-score { margin-top: auto; display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid rgba(128, 151, 221, .1); border-radius: 15px; background: rgba(30, 45, 88, .18); }
.vton-photo-score > span { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 10px; background: rgba(92, 106, 207, .14); color: #aab9ff; }
.vton-photo-score div { display: grid; gap: 3px; }
.vton-photo-score strong { font-size: .66rem; }
.vton-photo-score small { color: #8190ae; font-size: .59rem; line-height: 1.45; }
.vton-photo-score[data-state=ready] { border-color: rgba(85, 228, 161, .22); background: rgba(29, 123, 91, .1); }
.vton-photo-score[data-state=ready] > span { color: var(--vton-success); }

.vton-catalog-panel, .vton-custom-panel { min-height: 760px; padding: 14px; overflow: hidden; }
.vton-catalog-panel { display: flex; flex-direction: column; }
.vton-catalog-head { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.vton-search-wrap { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(138, 158, 218, .15); border-radius: 13px; background: rgba(6, 14, 35, .67); }
.vton-search-wrap i { color: #7f92c7; }
.vton-search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: .72rem; }
.vton-search-wrap input::placeholder { color: #687796; }
.vton-filter-button { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(138, 158, 218, .15); border-radius: 13px; background: rgba(18, 31, 66, .68); color: #d4ddf6; cursor: pointer; font-size: .69rem; font-weight: 750; }
.vton-collection-row { margin-top: 10px; padding: 4px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; border: 1px solid rgba(135, 155, 215, .11); border-radius: 14px; background: rgba(6, 13, 32, .42); }
.vton-collection-row button { min-width: 0; min-height: 39px; padding: 0 9px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #8695b5; cursor: pointer; font-size: .64rem; font-weight: 750; }
.vton-collection-row button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vton-collection-row button b { padding: 2px 6px; border-radius: 999px; background: rgba(134, 152, 211, .1); font-size: .52rem; }
.vton-collection-row button.is-active { border-color: rgba(128, 113, 255, .36); background: rgba(79, 70, 184, .23); color: #fff; }
.vton-filters { margin-top: 10px; padding: 10px; border: 1px solid rgba(135, 155, 215, .1); border-radius: 15px; background: rgba(6, 13, 32, .38); transition: .2s ease; }
.vton-filters.is-collapsed { max-height: 0; margin-top: 0; padding-block: 0; border-color: transparent; opacity: 0; overflow: hidden; }
.vton-category-row, .vton-region-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(120, 108, 255, .6) rgba(255,255,255,.04); }
.vton-region-row { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(133, 153, 212, .1); }
.vton-category-row button, .vton-region-row button { flex: 0 0 auto; min-height: 31px; padding: 0 11px; border: 1px solid rgba(136, 157, 216, .13); border-radius: 999px; background: rgba(18, 30, 62, .54); color: #9ba9c7; cursor: pointer; font-size: .59rem; font-weight: 750; transition: .18s ease; }
.vton-category-row button:hover, .vton-region-row button:hover { color: #fff; border-color: rgba(132, 116, 255, .35); }
.vton-category-row button.is-active, .vton-region-row button.is-active { border-color: rgba(111, 120, 255, .56); background: linear-gradient(120deg, rgba(93, 79, 215, .38), rgba(47, 94, 181, .28)); color: #fff; }
.vton-quick-filters { display: grid; grid-template-columns: repeat(4, minmax(86px, auto)) minmax(122px, auto); gap: 7px; align-items: end; padding-top: 8px; border-top: 1px solid rgba(133, 153, 212, .1); }
.vton-quick-filters label { min-width: 0; display: grid; gap: 4px; color: #71809f; font-size: .55rem; }
.vton-quick-filters select, .vton-dock-fields select, .vton-dock-fields input { width: 100%; min-height: 33px; padding: 0 9px; border: 1px solid rgba(139, 159, 219, .14); border-radius: 10px; outline: 0; background: #0b1734; color: #dce4fb; font-size: .61rem; }
.vton-auto-spin { min-height: 33px; padding: 0 9px; display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 7px !important; border: 1px solid rgba(139, 159, 219, .12); border-radius: 10px; background: #0b1734; color: #bdc7df !important; }
.vton-auto-spin input { accent-color: #7b6cff; }
.vton-catalog-summary { padding: 13px 2px 9px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.vton-catalog-summary > div { display: grid; gap: 3px; }
.vton-catalog-summary strong { font-size: .75rem; }
.vton-catalog-summary small { color: #71809e; font-size: .58rem; }
.vton-catalog-summary > span { color: #7383a3; font-size: .62rem; }
.vton-catalog-grid { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; align-content: start; overflow-y: auto; padding: 0 5px 5px 0; scrollbar-width: thin; scrollbar-color: rgba(121, 101, 255, .66) rgba(255,255,255,.035); }
.vton-product-card { position: relative; min-width: 0; min-height: 245px; padding: 0; display: grid; grid-template-rows: 170px auto; overflow: hidden; border: 1px solid rgba(126, 146, 207, .12); border-radius: 16px; background: linear-gradient(155deg, rgba(16, 30, 65, .88), rgba(6, 14, 34, .97)); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; content-visibility: visible;  }
.vton-product-card:hover { transform: translateY(-3px); border-color: rgba(127, 112, 255, .38); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.vton-product-card.is-active { border-color: #8b72ff; box-shadow: inset 0 0 0 1px rgba(139,114,255,.28), 0 15px 38px rgba(65, 54, 178, .2); }
.vton-product-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(73, 98, 159, .15), transparent 52%), #081229; }
.vton-product-visual::after { content: ""; position: absolute; inset: auto 12% 8px; height: 12px; border-radius: 50%; background: rgba(0,0,0,.3); filter: blur(7px); }
.vton-product-visual img { position: relative; z-index: 1; width: 100%; height: 100%; padding: 8px; object-fit: contain; transition: transform .28s ease; }
.vton-product-card:hover .vton-product-visual img { transform: scale(1.045) translateY(-2px); }
.vton-product-topline { position: absolute; z-index: 2; inset: 8px 8px auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none; }
.vton-product-badge, .vton-product-country { max-width: 74%; padding: 4px 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(5, 11, 27, .72); color: #b7c3e1; font-size: .48rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(7px); }
.vton-product-country { max-width: 46%; color: #efd69d; }
.vton-product-status-dot { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: rgba(5, 11, 27, .78); color: #60e2a2; font-size: .54rem; }
.vton-product-status-dot[data-status=experimental] { color: var(--vton-warning); }
.vton-product-status-dot[data-status=preview] { color: #89a4ff; }
.vton-product-body { min-width: 0; padding: 10px; display: grid; gap: 4px; border-top: 1px solid rgba(131, 151, 211, .08); }
.vton-product-body strong { overflow: hidden; color: #f3f5ff; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.vton-product-body span { overflow: hidden; color: #7383a4; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.vton-product-body small { display: inline-flex; align-items: center; gap: 5px; color: #91a0c0; font-size: .51rem; }
.vton-product-body small i { color: var(--card-accent, #7c6cff); }
.vton-empty-catalog { grid-column: 1/-1; min-height: 280px; display: grid; place-content: center; gap: 8px; text-align: center; color: #7382a3; }
.vton-empty-catalog strong { color: #dfe5f8; }

.vton-custom-panel { padding: 19px; display: flex; flex-direction: column; gap: 14px; }
.vton-custom-intro { margin: 0; color: #9ba7c1; font-size: .75rem; line-height: 1.65; }
.vton-garment-drop { position: relative; min-height: 360px; padding: 28px; display: grid; place-items: center; align-content: center; gap: 10px; overflow: hidden; border: 1px dashed rgba(125, 145, 221, .31); border-radius: 21px; background: radial-gradient(circle at center, rgba(78, 68, 174, .13), transparent 56%), rgba(7, 16, 39, .47); text-align: center; cursor: pointer; }
.vton-garment-upload-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 19px; background: linear-gradient(145deg, rgba(115, 90, 255, .28), rgba(54, 148, 233, .18)); color: #cad2ff; font-size: 1.15rem; }
.vton-garment-drop strong { font-size: .92rem; }
.vton-garment-drop p { margin: 0; color: #8391ae; font-size: .72rem; }
.vton-garment-drop > span:last-of-type { color: #657493; font-size: .61rem; }
.vton-garment-drop img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; border-radius: 14px; background: rgba(4,10,25,.5); }
.vton-garment-drop b { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 8px; overflow: hidden; border-radius: 10px; background: rgba(3, 8, 22, .75); color: #e1e7fa; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(8px); }
.vton-custom-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vton-custom-guide article { min-width: 0; padding: 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid rgba(132, 152, 212, .1); border-radius: 14px; background: rgba(8, 17, 40, .48); }
.vton-custom-guide i { color: #88a0ff; }
.vton-custom-guide div { display: grid; gap: 3px; }
.vton-custom-guide strong { font-size: .66rem; }
.vton-custom-guide span { color: #7786a6; font-size: .57rem; line-height: 1.4; }

.vton-viewer-panel { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.vton-viewer-head { min-height: 55px; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 9px; }
.vton-viewer-head button, .vton-stage-next { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(138, 158, 218, .15); border-radius: 11px; background: rgba(15, 27, 58, .7); color: #d5def7; cursor: pointer; }
.vton-viewer-head > div { min-width: 0; display: grid; gap: 3px; }
.vton-viewer-head span { color: #87a0df; font-size: .56rem; font-weight: 850; letter-spacing: .12em; }
.vton-viewer-head h2 { margin: 0; overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.vton-viewer-head p { margin: 0; color: #71809f; font-size: .59rem; }
#vtonFavorite.is-active { color: #ff79a8; border-color: rgba(255,121,168,.35); }
.vton-3d-stage { position: relative; min-height: 395px; overflow: hidden; border: 1px solid rgba(136, 156, 216, .12); border-radius: 20px; background: radial-gradient(circle at 50% 42%, rgba(71, 92, 162, .21), transparent 45%), linear-gradient(180deg, #09152f 0%, #050d21 100%); touch-action: none; cursor: grab; isolation: isolate; }
.vton-3d-stage:active { cursor: grabbing; }
.vton-3d-stage[data-render=soft] { background: radial-gradient(circle at 50% 40%, rgba(123, 139, 186, .19), transparent 48%), linear-gradient(180deg, #111a31, #081022); }
.vton-3d-stage[data-render=dramatic] { background: radial-gradient(circle at 45% 32%, rgba(153, 72, 132, .22), transparent 43%), radial-gradient(circle at 68% 58%, rgba(63, 80, 197, .21), transparent 36%), #030714; }
.vton-3d-stage[data-render=museum] { background: radial-gradient(circle at 50% 38%, rgba(214, 177, 99, .18), transparent 45%), linear-gradient(180deg, #16130f, #080a10); }
#vton3dCanvas, .vton-3d-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.vton-3d-fallback { display: grid; place-items: center; }
.vton-3d-fallback img { width: 100%; height: 100%; padding: 24px; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(0,0,0,.3)); }
.vton-stage-badge, .vton-stage-compatibility, .vton-stage-hint { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(153, 171, 226, .13); background: rgba(5, 12, 30, .7); color: #d1daf3; backdrop-filter: blur(9px); }
.vton-stage-badge { left: 11px; top: 11px; padding: 6px 8px; border-radius: 9px; font-size: .56rem; font-weight: 750; }
.vton-stage-compatibility { right: 11px; top: 11px; padding: 6px 9px; border-radius: 999px; color: #7be2b3; font-size: .53rem; font-weight: 800; }
.vton-stage-compatibility[data-status=experimental] { color: #ffd07b; }
.vton-stage-compatibility[data-status=preview] { color: #9db2ff; }
.vton-stage-hint { left: 50%; bottom: 10px; transform: translateX(-50%); padding: 6px 9px; border-radius: 999px; color: #8d9ab7; font-size: .53rem; white-space: nowrap; }
.vton-stage-next { position: absolute; z-index: 5; right: 11px; top: 50%; transform: translateY(-50%); }
.vton-stage-depth { position: absolute; z-index: -1; inset: auto 12% 10% 12%; height: 34%; transform: perspective(450px) rotateX(68deg); }
.vton-stage-depth i { position: absolute; inset: 0; border: 1px solid rgba(98, 119, 221, .19); border-radius: 50%; animation: depthPulse 3.8s ease-in-out infinite; }
.vton-stage-depth i:nth-child(2) { inset: 15%; animation-delay: -.8s; }
.vton-stage-depth i:nth-child(3) { inset: 30%; animation-delay: -1.6s; }
.vton-stage-depth i:nth-child(4) { inset: 45%; animation-delay: -2.4s; }
.vton-viewer-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.vton-viewer-controls .is-primary { border-color: rgba(128, 111, 255, .42); background: rgba(82, 71, 184, .29); color: #fff; }
.vton-angle-meter { padding: 7px 9px; display: grid; grid-template-columns: auto 1fr 32px; align-items: center; gap: 8px; border: 1px solid rgba(129, 150, 210, .09); border-radius: 11px; background: rgba(5,12,30,.36); color: #72809f; font-size: .52rem; }
.vton-angle-meter > div { position: relative; height: 4px; border-radius: 99px; background: rgba(130, 150, 210, .12); }
.vton-angle-meter i { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #8d78ff; box-shadow: 0 0 12px rgba(141,120,255,.65); transform: translate(-50%,-50%); transition: left .12s linear; }
.vton-angle-meter b { color: #aab5d0; font-size: .56rem; text-align: right; }
.vton-product-detail { padding: 13px; display: grid; gap: 10px; border: 1px solid rgba(135, 155, 215, .1); border-radius: 16px; background: rgba(6, 14, 34, .48); }
.vton-detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vton-detail-title-row > div { display: grid; gap: 3px; }
.vton-detail-title-row > div > span { color: #8398d5; font-size: .53rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vton-detail-title-row h3 { margin: 0; font-size: .82rem; }
#vtonDetailStatus { padding: 5px 7px; border-radius: 999px; background: rgba(55, 166, 123, .12); color: #6fe3ad; font-size: .5rem; font-weight: 800; }
#vtonDetailStatus[data-status=experimental] { background: rgba(182, 123, 36, .13); color: #ffcc73; }
#vtonDetailStatus[data-status=preview] { background: rgba(77, 100, 187, .16); color: #a8b8ff; }
.vton-product-detail > p { margin: 0; color: #8492af; font-size: .62rem; line-height: 1.55; }
.vton-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.vton-detail-grid span { min-width: 0; padding: 8px; display: grid; gap: 3px; border: 1px solid rgba(131, 151, 211, .08); border-radius: 10px; background: rgba(16, 28, 58, .48); }
.vton-detail-grid small { color: #667493; font-size: .48rem; }
.vton-detail-grid strong { overflow: hidden; color: #d7def3; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.vton-size-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vton-size-row > span { color: #7684a3; font-size: .53rem; }
#vtonSizeButtons { display: flex; gap: 4px; }
#vtonSizeButtons button { width: 27px; height: 27px; border: 1px solid rgba(131, 151, 211, .12); border-radius: 8px; background: rgba(14, 25, 53, .68); color: #9eabc7; cursor: pointer; font-size: .51rem; }
#vtonSizeButtons button.is-active { border-color: #816dff; background: rgba(91, 75, 202, .35); color: #fff; }

.vton-result-panel { margin-top: 16px; overflow: hidden; border: 1px solid rgba(135, 158, 228, .17); border-radius: 26px; background: rgba(8, 17, 40, .95); box-shadow: var(--vton-shadow); }
.vton-result-panel > header { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(134, 154, 214, .1); }
.vton-result-panel header div { display: grid; gap: 4px; }
.vton-result-panel header span { color: #8097d7; font-size: .58rem; font-weight: 850; letter-spacing: .12em; }
.vton-result-panel h2 { margin: 0; font-size: 1rem; }
.vton-result-panel header button { width: 35px; height: 35px; border: 1px solid rgba(134,154,214,.13); border-radius: 11px; background: rgba(14,26,55,.7); color: #cad4ef; cursor: pointer; }
.vton-result-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(290px,.5fr); gap: 14px; padding: 14px; }
.vton-result-visual { min-height: 600px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(134,154,214,.1); border-radius: 18px; background: #061028; }
.vton-result-visual img { width: 100%; height: 100%; object-fit: contain; }
.vton-result-loading { max-width: 380px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.vton-result-loading i { color: #8c76ff; font-size: 1.6rem; }
.vton-result-loading span { color: #8492ae; font-size: .72rem; line-height: 1.55; }
.vton-result-layout aside { padding: 15px; border: 1px solid rgba(134,154,214,.1); border-radius: 18px; background: rgba(5,12,30,.48); }
.vton-result-layout aside h3 { margin: 0 0 12px; font-size: .86rem; }
.vton-result-meta { display: grid; gap: 7px; }
.vton-result-meta article { padding: 9px; display: flex; justify-content: space-between; gap: 10px; border-radius: 10px; background: rgba(21,35,70,.5); font-size: .61rem; }
.vton-result-meta span { color: #93a0bb; }
.vton-result-layout aside p { margin: 14px 0 0; color: #7e8ca9; font-size: .62rem; line-height: 1.55; }
.vton-result-layout aside p i { color: #8da2ff; }

.vton-action-dock { position: fixed; z-index: 90; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); width: min(1840px, calc(100% - 42px)); min-height: var(--dock-height); padding: 10px 12px; display: grid; grid-template-columns: minmax(230px,.48fr) minmax(560px,1.25fr) minmax(190px,.28fr); align-items: center; gap: 12px; border: 1px solid rgba(142, 163, 231, .21); border-radius: 21px; background: rgba(5, 12, 31, .89); box-shadow: 0 22px 70px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.05); transform: translateX(-50%); backdrop-filter: blur(21px) saturate(135%); }
.vton-dock-status { min-width: 0; display: flex; align-items: center; gap: 10px; }
.vton-dock-status > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 13px; background: linear-gradient(145deg, rgba(117,87,255,.35), rgba(65,149,235,.22)); color: #d7dcff; }
.vton-dock-status div { min-width: 0; display: grid; gap: 4px; }
.vton-dock-status strong { font-size: .7rem; }
.vton-dock-status small { overflow: hidden; color: #7f8daa; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.vton-dock-fields { min-width: 0; display: grid; grid-template-columns: .7fr .9fr .9fr 1.65fr; gap: 8px; }
.vton-dock-fields label { min-width: 0; display: grid; gap: 4px; color: #73819f; font-size: .5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vton-dock-fields select, .vton-dock-fields input { min-height: 35px; text-transform: none; letter-spacing: normal; }
.vton-prompt-field input::placeholder { color: #5f6d8b; }
.vton-try-button { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 15px; background: linear-gradient(115deg, #8455ff, #6c55f4 42%, #2daff2); color: #fff; cursor: pointer; box-shadow: 0 14px 36px rgba(76, 71, 220, .35); transition: .2s ease; }
.vton-try-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 19px 42px rgba(76, 71, 220, .42); }
.vton-try-button:disabled { opacity: .55; cursor: wait; }
.vton-try-button > span { display: grid; gap: 2px; text-align: left; }
.vton-try-button strong { font-size: .7rem; }
.vton-try-button small { font-size: .51rem; opacity: .76; }

.vton-toast { position: fixed; z-index: 160; right: 24px; top: calc(var(--nav-height) + 18px); max-width: 360px; padding: 12px 14px; border: 1px solid rgba(145, 165, 229, .2); border-radius: 14px; background: rgba(7, 15, 37, .92); color: #dde4fa; box-shadow: 0 20px 50px rgba(0,0,0,.36); font-size: .7rem; line-height: 1.5; backdrop-filter: blur(15px); animation: toastIn .25s ease both; }

@keyframes ambientDriftA { to { transform: translate(80px, -50px) scale(1.12); } }
@keyframes ambientDriftB { to { transform: translate(-90px, 70px) scale(.92); } }
@keyframes threadPulse { 0%,100% { opacity:.25; transform: translateX(-5%) rotate(-18deg); } 50% { opacity:.65; transform: translateX(8%) rotate(-18deg); } }
@keyframes brandShine { 0%,70% { transform: translateX(-90%); } 88%,100% { transform: translateX(110%); } }
@keyframes haloBreathe { 0%,100% { transform: scale(.92); opacity:.7; } 50% { transform: scale(1.06); opacity:1; } }
@keyframes garmentFloat { 0%,100% { transform: translateY(4px) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes orbitDot { to { filter: hue-rotate(360deg); } }
@keyframes floatCardA { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(0); } }
@keyframes floatCardB { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(8px) rotate(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes depthPulse { 0%,100% { opacity:.3; transform: scale(.98); } 50% { opacity:.7; transform: scale(1.04); } }
@keyframes toastIn { from { opacity:0; transform: translateY(-8px); } }

@media (max-width: 1500px) {
  .vton-main, .vton-action-dock { width: min(1440px, calc(100% - 30px)); }
  .vton-workspace { grid-template-columns: minmax(230px,.62fr) minmax(480px,1.35fr) minmax(360px,.92fr); }
  .vton-catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .vton-product-card { min-height: 230px; grid-template-rows: 158px auto; }
  .vton-quick-filters { grid-template-columns: repeat(4, minmax(78px,1fr)); }
  .vton-auto-spin { grid-column: 1/-1; }
}

@media (max-width: 1180px) {
  :root { --dock-height: 112px; }
  .vton-hero { grid-template-columns: 1fr; }
  .vton-hero-showcase { min-height: 380px; }
  .vton-workspace { grid-template-columns: minmax(230px,.55fr) minmax(480px,1fr); }
  .vton-viewer-panel { grid-column: 1/-1; display: grid; grid-template-columns: minmax(420px,1.2fr) minmax(340px,.8fr); grid-template-rows: auto auto auto; }
  .vton-viewer-head { grid-column: 1/-1; }
  .vton-3d-stage { grid-row: 2/5; min-height: 520px; }
  .vton-viewer-controls, .vton-angle-meter, .vton-product-detail { grid-column: 2; }
  .vton-action-dock { grid-template-columns: minmax(220px,.45fr) 1fr minmax(180px,.28fr); }
  .vton-dock-fields { grid-template-columns: repeat(3,1fr); }
  .vton-prompt-field { grid-column: 1/-1; }
}

@media (max-width: 860px) {
  :root { --nav-height: 66px; --dock-height: 162px; }
  .vton-nav { padding-inline: 14px; }
  .vton-nav-links > a span { display: none; }
  .vton-nav-links > a { width: 40px; padding: 0; justify-content: center; }
  .vton-runtime-pill { padding-inline: 10px; }
  .vton-main { width: calc(100% - 18px); padding-top: calc(var(--nav-height) + 18px); }
  .vton-hero { min-height: auto; padding: 30px 22px; border-radius: 25px; }
  .vton-hero h1 { font-size: clamp(2.15rem, 10vw, 4rem); }
  .vton-float-card { display: none; }
  .vton-hero-garment { height: 320px; }
  .vton-mode-switch { width: 100%; }
  .vton-mode-tab { grid-template-columns: 38px 1fr; }
  .vton-mode-tab b { display: none; }
  .vton-workspace { grid-template-columns: 1fr; }
  .vton-person-panel, .vton-catalog-panel, .vton-custom-panel, .vton-viewer-panel { grid-column: auto; }
  .vton-person-drop { min-height: 440px; }
  .vton-catalog-panel, .vton-custom-panel { min-height: 700px; }
  .vton-viewer-panel { display: flex; }
  .vton-3d-stage { min-height: 510px; }
  .vton-catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .vton-action-dock { bottom: 6px; width: calc(100% - 12px); grid-template-columns: 1fr auto; gap: 8px; }
  .vton-dock-status { grid-column: 1/-1; }
  .vton-dock-fields { grid-template-columns: repeat(3,1fr); }
  .vton-prompt-field { grid-column: 1/-1; }
  .vton-try-button { min-width: 165px; align-self: stretch; }
  .vton-result-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --dock-height: 206px; }
  .vton-brand-copy small { display: none; }
  .vton-runtime-pill span { display: none; }
  .vton-runtime-pill { width: 40px; padding: 0; justify-content: center; }
  .vton-hero { padding: 27px 18px; }
  .vton-hero-showcase { min-height: 315px; }
  .vton-hero-garment { height: 285px; }
  .vton-hero-metrics span { min-width: 68px; }
  .vton-hero-actions { display: grid; }
  .vton-primary-action, .vton-secondary-action { width: 100%; }
  .vton-mode-switch { grid-template-columns: 1fr; }
  .vton-person-panel, .vton-catalog-panel, .vton-custom-panel, .vton-viewer-panel { border-radius: 19px; }
  .vton-person-drop { min-height: 390px; }
  .vton-collection-row { grid-template-columns: 1fr; }
  .vton-collection-row button { justify-content: flex-start; padding-inline: 12px; }
  .vton-quick-filters { grid-template-columns: 1fr 1fr; }
  .vton-auto-spin { grid-column: auto; }
  .vton-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vton-product-card { min-height: 220px; grid-template-rows: 150px auto; }
  .vton-product-country { display: none; }
  .vton-3d-stage { min-height: 430px; }
  .vton-viewer-controls span { display: none; }
  .vton-stage-hint { max-width: calc(100% - 26px); overflow: hidden; text-overflow: ellipsis; }
  .vton-custom-guide { grid-template-columns: 1fr; }
  .vton-action-dock { display: grid; grid-template-columns: 1fr; padding: 9px; }
  .vton-dock-fields { grid-template-columns: 1fr 1fr 1fr; }
  .vton-prompt-field { grid-column: 1/-1; }
  .vton-try-button { width: 100%; min-height: 48px; }
  .vton-dock-status { display: none; }
}

@media (max-width: 390px) {
  .vton-catalog-grid { grid-template-columns: 1fr; }
  .vton-product-card { grid-template-columns: 120px 1fr; grid-template-rows: 155px; min-height: 155px; }
  .vton-product-body { align-content: center; border-top: 0; border-left: 1px solid rgba(131,151,211,.08); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .vton-product-card, .vton-primary-action, .vton-secondary-action { transition: none !important; }
}

/* ==========================================================================
   PixiCore Wardrobe — Masterpiece direction v3
   ========================================================================== */
:root {
  --vton-shell: min(1880px, calc(100vw - 40px));
  --vton-glass: rgba(7, 15, 38, .78);
  --vton-glass-strong: rgba(5, 12, 31, .94);
  --vton-highlight: rgba(255, 255, 255, .075);
  --vton-ease: cubic-bezier(.2, .75, .2, 1);
  --dock-height: 104px;
}

.vton-page {
  background:
    radial-gradient(circle at 50% -15%, rgba(78, 92, 214, .17), transparent 34%),
    linear-gradient(180deg, #030817 0%, #050b1f 52%, #020611 100%);
}

.vton-page button,
.vton-page select,
.vton-page input {
  outline: none;
}

.vton-page button:focus-visible,
.vton-page a:focus-visible,
.vton-page select:focus-visible,
.vton-page input:focus-visible {
  outline: 2px solid rgba(104, 198, 255, .92);
  outline-offset: 3px;
}

.vton-ambient-orb-c {
  width: 540px;
  height: 540px;
  left: 39%;
  top: 62%;
  background: radial-gradient(circle, rgba(235, 100, 198, .09), transparent 70%);
  animation: ambientDriftC 26s ease-in-out infinite alternate;
}

.vton-ambient-noise {
  position: absolute;
  inset: 0;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.vton-nav {
  min-height: 76px;
  padding-inline: max(20px, calc((100vw - 1880px) / 2 + 20px));
  background: linear-gradient(180deg, rgba(3, 8, 23, .92), rgba(4, 10, 27, .78));
  border-bottom-color: rgba(144, 166, 239, .15);
  box-shadow: 0 16px 60px rgba(0, 3, 16, .38);
}

.vton-nav::after {
  content: "";
  position: absolute;
  inset: auto 10% -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 107, 255, .55), rgba(54, 210, 192, .45), transparent);
  opacity: .7;
}

.vton-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border-color: rgba(112, 190, 255, .28);
  background:
    radial-gradient(circle at 30% 20%, rgba(100, 186, 255, .18), transparent 45%),
    linear-gradient(145deg, rgba(37, 62, 116, .58), rgba(6, 20, 47, .9));
}

.vton-brand-copy strong {
  font-size: 1.08rem;
  letter-spacing: -.01em;
}

.vton-brand-copy small {
  color: #8fa4d9;
  letter-spacing: .18em;
}

.vton-nav-center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(137, 158, 224, .13);
  border-radius: 16px;
  background: rgba(10, 20, 48, .56);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(16px);
}

.vton-nav-center a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 11px;
  color: #8f9dbd;
  text-decoration: none;
  font-size: .69rem;
  font-weight: 800;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.vton-nav-center a:hover,
.vton-nav-center a.is-active {
  color: #fff;
  background: linear-gradient(120deg, rgba(116, 88, 255, .3), rgba(45, 159, 230, .19));
  transform: translateY(-1px);
}

.vton-nav-center a i {
  color: #9a8cff;
}

.vton-language {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(139, 158, 215, .15);
  border-radius: 13px;
  background: rgba(15, 28, 61, .55);
  color: #a9b6d5;
}

.vton-language select {
  width: 48px;
  min-height: 30px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: #e8ecfb;
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
}

.vton-language option {
  background: #09132d;
  color: #fff;
}

.vton-main {
  width: var(--vton-shell);
  padding-top: 108px;
  padding-bottom: calc(var(--dock-height) + 72px);
}

.vton-hero {
  min-height: 620px;
  grid-template-columns: minmax(0, 1.02fr) minmax(480px, .98fr);
  padding: clamp(44px, 5.2vw, 92px) clamp(30px, 5.4vw, 92px);
  border-radius: 40px;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 30%, rgba(112, 85, 255, .18), transparent 25%),
    radial-gradient(circle at 86% 78%, rgba(39, 206, 185, .12), transparent 22%),
    linear-gradient(135deg, rgba(12, 27, 65, .94), rgba(5, 13, 34, .97) 53%, rgba(14, 25, 59, .94));
  box-shadow:
    0 42px 110px rgba(0, 3, 18, .55),
    inset 0 1px rgba(255, 255, 255, .075),
    inset 0 -1px rgba(91, 112, 198, .06);
}

.vton-hero::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .035), transparent 27%),
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(141, 161, 222, .025) 72px),
    repeating-linear-gradient(0deg, transparent 0 71px, rgba(141, 161, 222, .022) 72px);
  mask-image: linear-gradient(135deg, #000, transparent 68%);
}

.vton-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 760px;
}

.vton-hero-version {
  color: #687797;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.vton-hero-version b {
  color: #a8b6de;
}

.vton-hero h1 {
  max-width: 850px;
  margin-block: 24px 22px;
  font-size: clamp(3rem, 4.7vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.064em;
  background: linear-gradient(120deg, #fff 4%, #dce5ff 48%, #91dbff 78%, #76e5c8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.vton-hero-copy > p {
  max-width: 760px;
  color: #abb8d7;
  font-size: clamp(1rem, 1.1vw, 1.18rem);
}

.vton-primary-action,
.vton-secondary-action {
  position: relative;
  min-height: 57px;
  padding-inline: 23px;
  overflow: hidden;
  border-radius: 17px;
}

.vton-primary-action::before,
.vton-try-button::before {
  content: "";
  position: absolute;
  inset: -50% auto -50% -30%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg) translateX(-220%);
  transition: transform .75s var(--vton-ease);
}

.vton-primary-action:hover::before,
.vton-try-button:hover::before {
  transform: skewX(-18deg) translateX(620%);
}

.vton-hero-trust {
  gap: 10px;
}

.vton-hero-trust span {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(132, 154, 219, .12);
  border-radius: 999px;
  background: rgba(10, 21, 49, .52);
}

.vton-hero-showcase {
  min-height: 500px;
  perspective: 1200px;
}

.vton-hero-halo {
  width: min(530px, 96%);
  background:
    radial-gradient(circle, rgba(124, 106, 255, .2), rgba(45, 212, 191, .06) 37%, transparent 68%);
  animation-duration: 5.8s;
}

.vton-orbit-system {
  position: absolute;
  inset: 4% -4% 7%;
  z-index: 1;
  transform-style: preserve-3d;
  pointer-events: none;
}

.vton-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(123, 145, 222, .17);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.vton-orbit-ring::before,
.vton-orbit-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 24px currentColor;
}

.vton-orbit-ring::before {
  width: 8px;
  height: 8px;
  left: 12%;
  top: 16%;
}

.vton-orbit-ring::after {
  width: 5px;
  height: 5px;
  right: 8%;
  bottom: 22%;
  opacity: .72;
}

.vton-orbit-ring i,
.vton-orbit-ring b {
  position: absolute;
  border-radius: 50%;
}

.vton-orbit-ring i {
  inset: 9%;
  border: 1px dashed rgba(126, 151, 225, .12);
}

.vton-orbit-ring b {
  width: 3px;
  height: 3px;
  left: 52%;
  top: -2px;
  background: #fff;
  box-shadow: 0 0 14px #fff;
}

.vton-orbit-ring-a {
  width: 92%;
  aspect-ratio: 1.55;
  color: #8879ff;
  transform: translate(-50%, -50%) rotate(-11deg) rotateX(64deg);
  animation: orbitRotateA 13s linear infinite;
}

.vton-orbit-ring-b {
  width: 76%;
  aspect-ratio: 1.2;
  color: #36dbc2;
  transform: translate(-50%, -50%) rotate(56deg) rotateX(72deg);
  animation: orbitRotateB 17s linear infinite reverse;
}

.vton-orbit-ring-c {
  width: 58%;
  aspect-ratio: 1;
  color: #efb762;
  transform: translate(-50%, -50%) rotate(19deg) rotateX(58deg);
  animation: orbitRotateC 10s linear infinite;
}

.vton-orbit-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(117, 137, 213, .2), transparent);
  transform-origin: center;
}

.vton-orbit-axis-a { transform: translate(-50%, -50%) rotate(26deg); }
.vton-orbit-axis-b { transform: translate(-50%, -50%) rotate(-38deg); }

.vton-hero-garment {
  height: 500px;
  animation: garmentFloatPremium 6.2s var(--vton-ease) infinite;
  transform-style: preserve-3d;
}

.vton-garment-aura {
  position: absolute;
  inset: 18% 8% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 108, 255, .22), transparent 70%);
  filter: blur(26px);
  animation: auraShift 7s ease-in-out infinite;
}

.vton-float-card {
  min-width: 174px;
  padding: 14px 15px;
  border-color: rgba(165, 182, 239, .2);
  background: linear-gradient(145deg, rgba(9, 18, 43, .86), rgba(6, 14, 34, .72));
  box-shadow: 0 22px 60px rgba(0, 3, 18, .43), inset 0 1px rgba(255, 255, 255, .06);
}

.vton-float-card strong {
  margin-top: 5px;
  font-size: 1.06rem;
}

.vton-float-card-a { left: -1%; top: 16%; }
.vton-float-card-b { right: -2%; bottom: 18%; }
.vton-float-card-c {
  left: 5%;
  bottom: 9%;
  animation: floatCardC 6.4s ease-in-out infinite;
}

.vton-hero-metrics {
  bottom: -3px;
  border-radius: 18px;
  background: rgba(5, 13, 33, .84);
  box-shadow: 0 18px 50px rgba(0, 3, 16, .35);
}

.vton-hero-metrics span {
  min-width: 83px;
  padding-block: 11px;
}

.vton-journey {
  position: relative;
  z-index: 5;
  margin: 24px 0;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(330px, .72fr) minmax(620px, 1.28fr);
  gap: 16px;
  border: 1px solid rgba(140, 163, 232, .16);
  border-radius: 25px;
  background:
    radial-gradient(circle at 8% 50%, rgba(122, 91, 255, .1), transparent 28%),
    rgba(7, 15, 37, .72);
  box-shadow: 0 22px 65px rgba(0, 4, 20, .28), inset 0 1px rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px) saturate(125%);
}

.vton-journey-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.vton-progress-ring,
.vton-mini-ring,
.vton-dock-progress,
.vton-result-orbit {
  --progress: 0;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #7d64ff calc(var(--progress) * 1%), #35d5bd calc(var(--progress) * 1%), rgba(128, 148, 209, .13) 0);
}

.vton-progress-ring::before,
.vton-mini-ring::before,
.vton-dock-progress::before,
.vton-result-orbit::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: #08122b;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

.vton-progress-ring {
  width: 70px;
  height: 70px;
  box-shadow: 0 0 36px rgba(96, 91, 255, .18);
}

.vton-progress-ring > span {
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
}

.vton-progress-ring strong { font-size: .85rem; }
.vton-progress-ring small { color: #7f8dac; font-size: .46rem; text-transform: uppercase; letter-spacing: .08em; }

.vton-journey-summary > div > span {
  color: #8c9dc3;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .14em;
}

.vton-journey-summary h2 {
  margin: 4px 0 3px;
  font-size: .95rem;
  letter-spacing: -.02em;
}

.vton-journey-summary p {
  margin: 0;
  color: #7584a5;
  font-size: .62rem;
  line-height: 1.5;
}

.vton-journey-steps {
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
}

.vton-journey-steps::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(130, 104, 255, .34), rgba(54, 211, 190, .18));
}

.vton-journey-steps li {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 11px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(132, 153, 216, .11);
  border-radius: 15px;
  background: rgba(7, 15, 36, .89);
  color: #667493;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}

.vton-journey-steps li > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(111, 127, 184, .1);
  font-size: .57rem;
  font-weight: 900;
}

.vton-journey-steps li div { min-width: 0; display: grid; gap: 2px; }
.vton-journey-steps li strong { overflow: hidden; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.vton-journey-steps li small { overflow: hidden; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.vton-journey-steps li > i { text-align: center; font-size: .75rem; }

.vton-journey-steps li.is-active,
.vton-journey-steps li.is-complete {
  color: #eef2ff;
  border-color: rgba(125, 101, 255, .35);
  background: linear-gradient(145deg, rgba(43, 35, 101, .58), rgba(9, 22, 49, .9));
  transform: translateY(-2px);
}

.vton-journey-steps li.is-complete {
  border-color: rgba(50, 210, 184, .28);
}

.vton-journey-steps li.is-complete > span {
  color: #9af3d9;
  background: rgba(44, 190, 157, .15);
}

.vton-mode-switch {
  margin-block: 0 22px;
  border-radius: 20px;
  background: rgba(8, 16, 39, .82);
  box-shadow: 0 17px 48px rgba(0, 4, 18, .24);
}

.vton-mode-tab {
  min-height: 70px;
  border-radius: 15px;
}

.vton-mode-tab.is-active {
  background: linear-gradient(130deg, rgba(105, 82, 242, .28), rgba(37, 124, 194, .18));
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 10px 30px rgba(13, 10, 55, .18);
}

.vton-workspace {
  gap: 18px;
}

.vton-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(143, 165, 232, .17);
  background:
    linear-gradient(145deg, rgba(11, 22, 52, .91), rgba(5, 13, 33, .93));
  box-shadow: 0 28px 85px rgba(0, 4, 20, .37), inset 0 1px rgba(255, 255, 255, .05);
}

.vton-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151, 170, 244, .36), transparent);
  pointer-events: none;
}

.vton-panel-heading > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(127, 151, 220, .16);
  border-radius: 13px;
  background: rgba(103, 81, 228, .11);
}

.vton-person-drop,
.vton-garment-drop {
  position: relative;
  border-style: solid;
  border-color: rgba(137, 161, 228, .18);
  background:
    radial-gradient(circle at 50% 28%, rgba(111, 88, 255, .1), transparent 32%),
    linear-gradient(180deg, rgba(8, 18, 43, .65), rgba(5, 12, 30, .82));
}

.vton-person-drop::after,
.vton-garment-drop::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(142, 164, 231, .12);
  border-radius: inherit;
  pointer-events: none;
}

.vton-upload-orbit {
  position: relative;
}

.vton-upload-orbit b {
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(112, 102, 255, .24);
  border-radius: 50%;
  animation: uploadOrbit 7s linear infinite;
}

.vton-upload-orbit b:last-child {
  inset: -20px;
  border-style: dashed;
  border-color: rgba(45, 212, 191, .16);
  animation-direction: reverse;
  animation-duration: 10s;
}

.vton-photo-readiness {
  padding: 13px;
  border: 1px solid rgba(135, 157, 219, .13);
  border-radius: 17px;
  background: rgba(5, 13, 32, .56);
}

.vton-photo-readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vton-photo-readiness-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.vton-photo-readiness-head span {
  color: #7180a0;
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .1em;
}

.vton-photo-readiness-head strong {
  font-size: .68rem;
}

.vton-mini-ring {
  width: 52px;
  height: 52px;
}

.vton-mini-ring b,
.vton-mini-ring small {
  position: relative;
  z-index: 1;
}

.vton-mini-ring b { font-size: .7rem; }
.vton-mini-ring small { margin-left: 1px; color: #7583a2; font-size: .42rem; }

.vton-photo-criteria {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.vton-photo-criteria > span {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 2px 6px;
  border: 1px solid rgba(132, 153, 216, .09);
  border-radius: 11px;
  background: rgba(11, 22, 49, .52);
}

.vton-photo-criteria i {
  grid-row: 1 / span 2;
  align-self: center;
  color: #55627e;
  font-size: .38rem;
}

.vton-photo-criteria b,
.vton-photo-criteria small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vton-photo-criteria b { font-size: .51rem; }
.vton-photo-criteria small { color: #71809f; font-size: .44rem; }

.vton-photo-criteria > span.is-good i { color: #55e4a1; filter: drop-shadow(0 0 5px rgba(85, 228, 161, .65)); }
.vton-photo-criteria > span.is-warning i { color: #f2bd66; }

.vton-photo-readiness > p {
  margin: 9px 0 0;
  color: #657392;
  font-size: .48rem;
  line-height: 1.55;
}

.vton-product-card {
  overflow: hidden;
  border-color: rgba(133, 154, 215, .12);
  background: linear-gradient(160deg, rgba(13, 25, 57, .78), rgba(6, 14, 34, .92));
  box-shadow: 0 14px 35px rgba(0, 4, 18, .2);
  transition: transform .28s var(--vton-ease), border-color .28s ease, box-shadow .28s ease;
}

.vton-product-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--card-accent) 48%, transparent);
  box-shadow: 0 25px 58px rgba(0, 4, 22, .4), 0 0 0 1px color-mix(in srgb, var(--card-accent) 17%, transparent);
}

.vton-product-card.is-active {
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0, 4, 22, .38), 0 0 0 1px color-mix(in srgb, var(--card-accent) 45%, transparent);
}

.vton-product-visual::after {
  content: "";
  position: absolute;
  inset: auto 14% 0;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--card-accent) 20%, transparent), transparent 70%);
  filter: blur(10px);
}

.vton-3d-stage {
  border-color: rgba(136, 160, 229, .17);
  background:
    radial-gradient(circle at 50% 42%, rgba(96, 89, 224, .15), transparent 34%),
    linear-gradient(180deg, rgba(8, 17, 42, .96), rgba(4, 11, 27, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 24px 65px rgba(0, 4, 20, .32);
}

.vton-stage-telemetry {
  position: absolute;
  right: 14px;
  bottom: 13px;
  display: grid;
  gap: 4px;
  color: rgba(146, 165, 211, .46);
  font-size: .43rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.vton-stage-telemetry span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.vton-stage-telemetry i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4eddb9;
  box-shadow: 0 0 8px #4eddb9;
}

.vton-intelligence-panel {
  position: relative;
  margin-top: 20px;
  padding: clamp(22px, 2.7vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(144, 166, 233, .17);
  border-radius: 30px;
  background:
    radial-gradient(circle at 13% 18%, rgba(122, 92, 255, .13), transparent 27%),
    radial-gradient(circle at 87% 78%, rgba(45, 212, 191, .08), transparent 25%),
    linear-gradient(145deg, rgba(11, 22, 52, .91), rgba(5, 12, 31, .96));
  box-shadow: 0 32px 90px rgba(0, 4, 20, .4), inset 0 1px rgba(255, 255, 255, .055);
}

.vton-intelligence-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(141, 160, 225, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 160, 225, .027) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(125deg, #000, transparent 66%);
}

.vton-intelligence-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

.vton-intelligence-head > div {
  max-width: 980px;
}

.vton-intelligence-head > div > span {
  color: #9888ff;
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.vton-intelligence-head h2 {
  margin: 9px 0 8px;
  font-size: clamp(1.45rem, 2.15vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.vton-intelligence-head p {
  margin: 0;
  color: #8d9bbb;
  font-size: .75rem;
  line-height: 1.7;
}

.vton-contract-badge {
  flex: 0 0 auto;
  min-width: 190px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 9px;
  border: 1px solid rgba(53, 213, 189, .18);
  border-radius: 15px;
  background: rgba(9, 54, 54, .22);
}

.vton-contract-badge > i {
  grid-row: 1 / span 2;
  align-self: center;
  color: #53dfc1;
}

.vton-contract-badge b { font-size: .58rem; }
.vton-contract-badge small { color: #719c99; font-size: .48rem; }

.vton-fidelity-layout {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
}

.vton-fidelity-gauges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vton-fidelity-card {
  --level: 90%;
  position: relative;
  min-width: 0;
  min-height: 210px;
  padding: 16px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px 11px;
  overflow: hidden;
  border: 1px solid rgba(137, 158, 220, .13);
  border-radius: 19px;
  background: linear-gradient(150deg, rgba(16, 29, 63, .82), rgba(6, 14, 34, .89));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

.vton-fidelity-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -90px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 19%, transparent), transparent 70%);
}

.vton-fidelity-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
}

.vton-fidelity-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.vton-fidelity-copy strong { font-size: .71rem; }
.vton-fidelity-copy small { color: #7483a3; font-size: .52rem; line-height: 1.5; }

.vton-fidelity-value {
  display: flex;
  align-items: flex-start;
  color: var(--accent);
}

.vton-fidelity-value output {
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1;
}

.vton-fidelity-value small { font-size: .55rem; }

.vton-fidelity-card input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 18px;
  margin: 0;
  opacity: .001;
  cursor: pointer;
  z-index: 2;
}

.vton-fidelity-track {
  position: relative;
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(113, 132, 186, .13);
}

.vton-fidelity-track i {
  display: block;
  width: var(--level);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: width .18s ease;
}

.vton-policy-card {
  padding: 17px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(139, 161, 224, .14);
  border-radius: 20px;
  background: rgba(5, 13, 32, .66);
}

.vton-policy-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.vton-policy-title > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(117, 87, 255, .3), rgba(45, 168, 220, .15));
  color: #c7c8ff;
}

.vton-policy-title > div { display: grid; gap: 3px; }
.vton-policy-title strong { font-size: .7rem; }
.vton-policy-title small { color: #71809f; font-size: .5rem; }

.vton-policy-card > label:not(.vton-policy-switch) {
  display: grid;
  gap: 5px;
  color: #7988a8;
  font-size: .51rem;
  font-weight: 750;
}

.vton-policy-card select {
  min-height: 39px;
  padding: 0 11px;
  border: 1px solid rgba(135, 156, 218, .14);
  border-radius: 11px;
  background: rgba(10, 21, 48, .85);
  color: #e3e9fa;
  font-size: .61rem;
}

.vton-policy-switch {
  display: block;
  cursor: pointer;
}

.vton-policy-switch > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vton-policy-switch > span {
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 2px 10px;
  border: 1px solid rgba(132, 153, 216, .1);
  border-radius: 12px;
  background: rgba(10, 21, 47, .55);
}

.vton-policy-switch > span > i {
  position: relative;
  grid-row: 1 / span 2;
  align-self: center;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: rgba(93, 107, 147, .3);
  transition: background .2s ease;
}

.vton-policy-switch > span > i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #7c88a7;
  transition: transform .22s var(--vton-ease), background .2s ease;
}

.vton-policy-switch input:checked + span > i {
  background: rgba(45, 212, 191, .26);
}

.vton-policy-switch input:checked + span > i::after {
  background: #55e4c4;
  transform: translateX(13px);
  box-shadow: 0 0 10px rgba(85, 228, 196, .55);
}

.vton-policy-switch b { font-size: .58rem; }
.vton-policy-switch small { color: #6f7e9d; font-size: .47rem; }

.vton-contract-preview {
  padding: 10px 11px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  border: 1px solid rgba(53, 213, 189, .13);
  border-radius: 12px;
  background: rgba(10, 63, 58, .15);
}

.vton-contract-preview span {
  grid-row: 1 / span 2;
  align-self: center;
  color: #5ce2c7;
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.vton-contract-preview strong { font-size: .52rem; }
.vton-contract-preview small { color: #668c89; font-size: .44rem; }

.vton-result-panel {
  margin-top: 20px;
  border-radius: 28px;
  border-color: rgba(144, 166, 233, .18);
  background: linear-gradient(145deg, rgba(10, 21, 50, .96), rgba(4, 11, 28, .98));
  box-shadow: 0 35px 100px rgba(0, 3, 18, .48);
}

.vton-result-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vton-result-panel > header > .vton-result-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
  margin-left: auto;
}

.vton-result-panel > header > div:first-child {
  min-width: 0;
}

.vton-result-panel .vton-result-head-actions button {
  width: auto;
  height: auto;
  min-height: 34px;
  min-width: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(140, 160, 222, .14);
  border-radius: 10px;
  background: rgba(14, 25, 55, .58);
  color: #9ba8c5;
  cursor: pointer;
  font-size: .54rem;
  line-height: 1;
  white-space: nowrap;
}

.vton-result-panel .vton-result-head-actions button:last-child {
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
}

.vton-result-loading {
  min-height: 440px;
  padding: 28px;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-content: center;
  gap: 18px 24px;
}

.vton-result-orbit {
  grid-row: 1 / span 2;
  align-self: center;
  width: 126px;
  height: 126px;
  box-shadow: 0 0 55px rgba(112, 91, 255, .18);
}

.vton-result-orbit::before { inset: 8px; background: #071128; }

.vton-result-orbit > span {
  position: relative;
  z-index: 2;
  display: grid;
  text-align: center;
}

.vton-result-orbit strong { font-size: 1.12rem; }
.vton-result-orbit small { color: #7685a5; font-size: .46rem; text-transform: uppercase; letter-spacing: .08em; }

.vton-result-orbit > i,
.vton-result-orbit > b {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(122, 105, 255, .18);
  border-radius: 50%;
  animation: resultOrbit 8s linear infinite;
}

.vton-result-orbit > i::after,
.vton-result-orbit > b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8e7cff;
  box-shadow: 0 0 15px #8e7cff;
}

.vton-result-orbit > b {
  inset: -22px;
  border-style: dashed;
  border-color: rgba(45, 212, 191, .12);
  animation-duration: 13s;
  animation-direction: reverse;
}

.vton-result-orbit > b::after { background: #45dfc3; box-shadow: 0 0 15px #45dfc3; }

.vton-result-loading-copy {
  align-self: end;
  display: grid;
  gap: 7px;
}

.vton-result-loading-copy strong { font-size: .92rem; }
.vton-result-loading-copy span { max-width: 520px; color: #7e8dac; font-size: .61rem; line-height: 1.6; }

.vton-pipeline-steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  list-style: none;
}

.vton-pipeline-steps li {
  min-width: 0;
  padding: 9px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 7px;
  border: 1px solid rgba(133, 154, 216, .1);
  border-radius: 11px;
  background: rgba(9, 19, 44, .6);
  color: #5e6c89;
}

.vton-pipeline-steps li > i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(104, 119, 166, .1);
  font-size: .58rem;
}

.vton-pipeline-steps li span { min-width: 0; display: grid; gap: 2px; }
.vton-pipeline-steps li strong,
.vton-pipeline-steps li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vton-pipeline-steps li strong { font-size: .51rem; }
.vton-pipeline-steps li small { font-size: .43rem; }

.vton-pipeline-steps li.is-active,
.vton-pipeline-steps li.is-complete {
  color: #e8edff;
  border-color: rgba(126, 104, 255, .26);
  background: rgba(61, 48, 129, .25);
}

.vton-pipeline-steps li.is-active > i {
  color: #b8adff;
  box-shadow: 0 0 18px rgba(126, 104, 255, .18);
}

.vton-pipeline-steps li.is-complete {
  border-color: rgba(47, 207, 179, .22);
  background: rgba(20, 99, 85, .16);
}

.vton-action-dock {
  width: var(--vton-shell);
  min-height: 94px;
  grid-template-columns: minmax(260px, .48fr) auto minmax(500px, 1fr) minmax(230px, .32fr);
  gap: 10px;
  padding: 11px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 50%, rgba(115, 86, 255, .12), transparent 24%),
    rgba(4, 11, 28, .9);
  box-shadow: 0 28px 90px rgba(0, 3, 17, .58), inset 0 1px rgba(255, 255, 255, .06);
}

.vton-dock-status {
  gap: 12px;
}

.vton-dock-progress {
  width: 46px;
  height: 46px;
}

.vton-dock-progress::before { inset: 4px; }

.vton-dock-progress span {
  position: relative;
  z-index: 1;
  font-size: .64rem;
  font-weight: 850;
}

.vton-dock-status strong { font-size: .72rem; }
.vton-dock-status small { max-width: 380px; font-size: .55rem; }

.vton-dock-toggle {
  display: none;
  min-height: 42px;
  padding: 0 12px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(137, 158, 219, .14);
  border-radius: 12px;
  background: rgba(12, 23, 51, .66);
  color: #a4b0cc;
  cursor: pointer;
  font-size: .56rem;
  font-weight: 800;
}

.vton-dock-fields {
  grid-template-columns: .65fr .8fr .75fr minmax(210px, 1.8fr);
}

.vton-dock-fields label[hidden] { display: none !important; }

.vton-try-button {
  position: relative;
  min-height: 62px;
  padding: 0 15px 0 17px;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 17px;
  background: linear-gradient(115deg, #805cff, #625fe8 47%, #279dd6 100%);
}

.vton-try-button > b {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .12);
}

.vton-try-button strong { font-size: .73rem; }
.vton-try-button small { font-size: .5rem; }

.vton-action-dock.is-running .vton-try-button {
  background: linear-gradient(115deg, #584f91, #3f5884);
}

.vton-action-dock.is-running .vton-try-button > b i {
  animation: spin 1.1s linear infinite;
}

.vton-action-dock.is-expanded .vton-dock-toggle i {
  transform: rotate(90deg);
}

.vton-page.is-page-hidden *,
.vton-page.vton-performance-eco .vton-orbit-system *,
.vton-page.vton-performance-eco .vton-ambient-orb,
.vton-page.vton-performance-eco .vton-ambient-thread,
.vton-page.vton-performance-eco .vton-garment-aura,
.vton-page.vton-performance-eco .vton-float-card {
  animation-play-state: paused !important;
}

@keyframes ambientDriftC {
  to { transform: translate(-120px, -60px) scale(1.16); }
}

@keyframes orbitRotateA {
  from { transform: translate(-50%, -50%) rotate(-11deg) rotateX(64deg) rotateZ(0); }
  to { transform: translate(-50%, -50%) rotate(-11deg) rotateX(64deg) rotateZ(360deg); }
}

@keyframes orbitRotateB {
  from { transform: translate(-50%, -50%) rotate(56deg) rotateX(72deg) rotateZ(0); }
  to { transform: translate(-50%, -50%) rotate(56deg) rotateX(72deg) rotateZ(360deg); }
}

@keyframes orbitRotateC {
  from { transform: translate(-50%, -50%) rotate(19deg) rotateX(58deg) rotateZ(0); }
  to { transform: translate(-50%, -50%) rotate(19deg) rotateX(58deg) rotateZ(360deg); }
}

@keyframes garmentFloatPremium {
  0%, 100% { transform: translate3d(0, 7px, 0) rotateY(-2deg) rotateZ(-.6deg); }
  50% { transform: translate3d(0, -12px, 0) rotateY(2deg) rotateZ(.6deg); }
}

@keyframes auraShift {
  0%, 100% { opacity: .7; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes floatCardC {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(9px) rotate(1deg); }
}

@keyframes uploadOrbit {
  to { transform: rotate(360deg); }
}

@keyframes resultOrbit {
  to { transform: rotate(360deg); }
}

@media (min-width: 1900px) {
  .vton-hero { min-height: 680px; }
  .vton-workspace { grid-template-columns: minmax(300px, .62fr) minmax(680px, 1.45fr) minmax(470px, .93fr); }
  .vton-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vton-product-card { min-height: 300px; grid-template-rows: 210px auto; }
  .vton-person-drop { min-height: 540px; }
  .vton-3d-stage { min-height: 590px; }
}

@media (max-width: 1540px) {
  :root { --vton-shell: min(1460px, calc(100vw - 30px)); }
  .vton-nav-center { display: none; }
  .vton-hero { min-height: 570px; grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr); }
  .vton-hero-garment { height: 450px; }
  .vton-journey { grid-template-columns: minmax(300px, .58fr) minmax(600px, 1.42fr); }
  .vton-action-dock { grid-template-columns: minmax(230px, .42fr) minmax(480px, 1fr) minmax(210px, .31fr); }
  .vton-dock-toggle { display: none; }
  .vton-action-dock .vton-dock-fields { grid-column: 2; }
  .vton-action-dock .vton-try-button { grid-column: 3; }
}

@media (max-width: 1240px) {
  :root { --dock-height: 126px; }
  .vton-hero { grid-template-columns: 1fr; }
  .vton-hero-copy { max-width: 980px; }
  .vton-hero-showcase { min-height: 480px; }
  .vton-hero-garment { height: 460px; }
  .vton-float-card-a { left: 10%; }
  .vton-float-card-b { right: 9%; }
  .vton-float-card-c { left: 15%; }
  .vton-journey { grid-template-columns: 1fr; }
  .vton-fidelity-layout { grid-template-columns: 1fr; }
  .vton-action-dock {
    grid-template-columns: minmax(240px, .42fr) minmax(500px, 1fr) minmax(210px, .32fr);
  }
}

@media (max-width: 980px) {
  :root { --vton-shell: calc(100vw - 20px); --dock-height: 132px; }
  .vton-nav { padding-inline: 13px; }
  .vton-nav-links > a span { display: none; }
  .vton-nav-links > a { width: 40px; padding: 0; justify-content: center; }
  .vton-language { width: 42px; padding: 0; justify-content: center; }
  .vton-language i { display: none; }
  .vton-language select { width: 38px; text-align: center; }
  .vton-main { padding-top: 94px; }
  .vton-hero { padding: 34px 26px; border-radius: 29px; }
  .vton-hero h1 { font-size: clamp(2.7rem, 9vw, 5.2rem); }
  .vton-journey-steps { grid-template-columns: 1fr 1fr; }
  .vton-journey-steps::before { display: none; }
  .vton-workspace { grid-template-columns: 1fr; }
  .vton-viewer-panel { display: flex; }
  .vton-fidelity-gauges { grid-template-columns: 1fr; }
  .vton-fidelity-card { min-height: 150px; }
  .vton-action-dock {
    grid-template-columns: minmax(210px, .58fr) auto minmax(220px, .42fr);
  }
  .vton-dock-toggle { display: inline-flex; }
  .vton-dock-fields {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    padding: 12px;
    display: none;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(139, 160, 224, .17);
    border-radius: 18px;
    background: rgba(4, 11, 28, .95);
    box-shadow: 0 24px 70px rgba(0, 3, 18, .55);
    backdrop-filter: blur(18px);
  }
  .vton-action-dock.is-expanded .vton-dock-fields { display: grid; }
  .vton-prompt-field { grid-column: 1 / -1; }
  .vton-result-loading { grid-template-columns: 110px minmax(0, 1fr); }
  .vton-result-orbit { width: 104px; height: 104px; }
}

@media (max-width: 680px) {
  :root { --vton-shell: calc(100vw - 12px); --dock-height: 116px; }
  .vton-brand-copy small { display: none; }
  .vton-runtime-pill { width: 40px; padding: 0; justify-content: center; }
  .vton-runtime-pill span { display: none; }
  .vton-nav-links { gap: 6px; }
  .vton-hero { padding: 28px 18px; border-radius: 24px; }
  .vton-hero-meta { align-items: flex-start; }
  .vton-hero-version { max-width: 90px; text-align: right; }
  .vton-hero h1 { margin-block: 20px 18px; font-size: clamp(2.35rem, 12vw, 4.1rem); }
  .vton-hero-actions { display: grid; }
  .vton-primary-action, .vton-secondary-action { width: 100%; }
  .vton-hero-trust { display: grid; grid-template-columns: 1fr; }
  .vton-hero-trust span { width: fit-content; }
  .vton-hero-showcase { min-height: 365px; }
  .vton-hero-garment { height: 345px; }
  .vton-orbit-system { inset: 9% -15% 8%; }
  .vton-float-card { display: none; }
  .vton-hero-metrics { width: calc(100% - 8px); }
  .vton-hero-metrics span { min-width: 0; flex: 1; padding-inline: 6px; }
  .vton-journey { padding: 13px; border-radius: 20px; }
  .vton-journey-summary { align-items: flex-start; }
  .vton-progress-ring { width: 60px; height: 60px; }
  .vton-journey-steps { grid-template-columns: 1fr; }
  .vton-journey-steps li { min-height: 55px; }
  .vton-mode-switch { grid-template-columns: 1fr; }
  .vton-photo-criteria { grid-template-columns: 1fr; }
  .vton-intelligence-panel { padding: 20px 14px; border-radius: 23px; }
  .vton-intelligence-head { display: grid; }
  .vton-contract-badge { width: 100%; }
  .vton-fidelity-card { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .vton-result-panel > header {
    align-items: flex-start;
    gap: 12px;
  }
  .vton-result-panel > header > .vton-result-head-actions {
    min-width: auto;
    gap: 7px;
  }
  .vton-result-panel .vton-result-head-actions button:first-child {
    width: 34px;
    height: 34px;
    padding: 0;
  }
  .vton-result-panel .vton-result-head-actions button:first-child span { display: none; }
  .vton-result-loading { min-height: 470px; padding: 20px 14px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .vton-result-orbit { grid-row: auto; }
  .vton-result-loading-copy { justify-items: center; }
  .vton-pipeline-steps { grid-template-columns: 1fr 1fr; width: 100%; }
  .vton-result-layout aside { padding: 18px; }
  .vton-action-dock {
    width: calc(100vw - 10px);
    grid-template-columns: 1fr auto;
    min-height: 92px;
    padding: 9px;
    border-radius: 20px;
  }
  .vton-dock-status { grid-column: 1; }
  .vton-dock-status small { max-width: 210px; }
  .vton-dock-toggle { grid-column: 2; width: 42px; padding: 0; justify-content: center; }
  .vton-dock-toggle span { display: none; }
  .vton-try-button { grid-column: 1 / -1; min-height: 50px; }
  .vton-dock-progress { width: 40px; height: 40px; }
}

@media (max-width: 430px) {
  .vton-brand-mark { width: 42px; height: 42px; }
  .vton-brand-copy strong { font-size: .92rem; }
  .vton-nav-links > a:nth-child(2) { display: none; }
  .vton-language { display: none; }
  .vton-hero h1 { font-size: 2.65rem; }
  .vton-hero-copy > p { font-size: .9rem; }
  .vton-hero-showcase { min-height: 320px; }
  .vton-hero-garment { height: 300px; }
  .vton-hero-metrics small { font-size: .48rem; }
  .vton-catalog-grid { grid-template-columns: 1fr; }
  .vton-product-card { grid-template-columns: 126px 1fr; grid-template-rows: 162px; }
  .vton-fidelity-value output { font-size: 1.2rem; }
  .vton-pipeline-steps { grid-template-columns: 1fr; }
  .vton-dock-status small { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .vton-orbit-system *,
  .vton-garment-aura,
  .vton-result-orbit > i,
  .vton-result-orbit > b,
  .vton-upload-orbit b {
    animation: none !important;
  }
}


/* PIXICORE_VTON_SCROLL_STABILITY_V5
   Stabilisation des cartes du catalogue VTON. */

.vton-catalog-grid {
  overflow-anchor: none;
  /*
   * Le catalogue conserve son propre scroll lorsqu'il
   * possède encore du contenu dans la direction demandée.
   * Aux limites, la molette est rendue à la page.
   */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  scrollbar-gutter: stable;
}

.vton-product-card {
  touch-action: pan-y pinch-zoom;
  content-visibility: visible !important;
  contain: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.vton-product-visual {
  isolation: isolate;
  overflow: hidden;
}

.vton-product-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  visibility: visible !important;
  opacity: 1 !important;
  backface-visibility: hidden;
}

#vton3dCanvas,
#vton3dFallback,
#vtonFallbackImage {
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .vton-product-card {
    content-visibility: visible !important;
    transition: none !important;
  }
}


/* PIXICORE_VTON_MAC_FLUIDITY_CSS_V6
   Optimisation de composition Safari/macOS.
   La qualité complète revient dès que le scroll s’arrête. */

.vton-stage-prev {
  position: absolute;
  z-index: 6;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
}

.vton-stage-exit {
  position: absolute;
  z-index: 12;
  top: 14px;
  right: 14px;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(4, 10, 26, .88) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#vtonFullscreenExit[hidden] {
  display: none !important;
}

.vton-3d-stage.is-fullscreen,
.vton-3d-stage:fullscreen,
.vton-3d-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: none;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(71, 92, 162, .22),
      transparent 46%
    ),
    #040a1b;
}

.vton-3d-stage.is-fullscreen
.vton-stage-prev,
.vton-3d-stage.is-fullscreen
.vton-stage-next,
.vton-3d-stage:fullscreen
.vton-stage-prev,
.vton-3d-stage:fullscreen
.vton-stage-next,
.vton-3d-stage:-webkit-full-screen
.vton-stage-prev,
.vton-3d-stage:-webkit-full-screen
.vton-stage-next {
  width: 48px;
  height: 58px;
  border-radius: 16px;
  background: rgba(4, 10, 26, .82);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vton-3d-stage.is-fullscreen
.vton-stage-prev,
.vton-3d-stage:fullscreen
.vton-stage-prev,
.vton-3d-stage:-webkit-full-screen
.vton-stage-prev {
  left: max(18px, env(safe-area-inset-left));
}

.vton-3d-stage.is-fullscreen
.vton-stage-next,
.vton-3d-stage:fullscreen
.vton-stage-next,
.vton-3d-stage:-webkit-full-screen
.vton-stage-next {
  right: max(18px, env(safe-area-inset-right));
}

.vton-3d-stage.is-fullscreen
.vton-stage-compatibility,
.vton-3d-stage:fullscreen
.vton-stage-compatibility,
.vton-3d-stage:-webkit-full-screen
.vton-stage-compatibility {
  right: 72px;
}

.vton-3d-stage.is-fullscreen
.vton-stage-hint,
.vton-3d-stage:fullscreen
.vton-stage-hint,
.vton-3d-stage:-webkit-full-screen
.vton-stage-hint {
  bottom: max(22px, env(safe-area-inset-bottom));
  padding: 9px 13px;
  font-size: .62rem;
}

html.vton-macos {
  scroll-behavior: auto;
}

/* Safari est plus fluide avec le scroll natif de la page
   qu’avec un grand conteneur à défilement imbriqué. */
@media (min-width: 1181px) and (pointer: fine) {
  html.vton-macos .vton-workspace {
    align-items: start;
  }

  html.vton-macos .vton-catalog-panel {
    min-height: auto;
    overflow: visible;
  }

  html.vton-macos .vton-catalog-grid {
    flex: none;
    overflow: visible;
    max-height: none;
    scrollbar-gutter: auto;
    overscroll-behavior: auto;
  }
}

/* Pendant le scroll seulement, Safari évite les
   recompositions GPU les plus coûteuses. */
html.vton-macos.vton-is-scrolling
.vton-ambient-orb,
html.vton-macos.vton-is-scrolling
.vton-ambient-thread,
html.vton-macos.vton-is-scrolling
.vton-orbit-system *,
html.vton-macos.vton-is-scrolling
.vton-garment-aura,
html.vton-macos.vton-is-scrolling
.vton-float-card,
html.vton-macos.vton-is-scrolling
.vton-stage-depth i {
  animation-play-state: paused !important;
}

html.vton-macos.vton-is-scrolling
.vton-nav,
html.vton-macos.vton-is-scrolling
.vton-nav-center,
html.vton-macos.vton-is-scrolling
.vton-mode-switch,
html.vton-macos.vton-is-scrolling
.vton-action-dock,
html.vton-macos.vton-is-scrolling
.vton-float-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.vton-macos.vton-is-scrolling
.vton-product-card:hover,
html.vton-macos.vton-is-scrolling
.vton-product-card:hover
.vton-product-visual img {
  transform: none !important;
}

html.vton-macos .vton-3d-stage {
  overscroll-behavior: contain;
}


/* PIXICORE_VTON_RESULT_DOWNLOAD_STYLE_V9
   Action de téléchargement discrète et premium. */

.vton-result-download-wrap {
  margin-top: 14px;
}

.vton-result-download {
  min-height: 62px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(126, 150, 225, .18);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(31, 45, 86, .72),
      rgba(12, 24, 54, .78)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 13px 30px rgba(0, 3, 18, .2);
  color: #edf2ff;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.vton-result-download[hidden] {
  display: none !important;
}

.vton-result-download:hover {
  transform: translateY(-1px);
  border-color: rgba(116, 153, 255, .38);
  background:
    linear-gradient(
      135deg,
      rgba(38, 56, 105, .82),
      rgba(14, 29, 65, .88)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 16px 38px rgba(0, 3, 18, .3);
}

.vton-result-download:focus-visible {
  outline: 2px solid rgba(117, 144, 255, .9);
  outline-offset: 3px;
}

.vton-result-download-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(119, 148, 241, .22);
  border-radius: 11px;
  background:
    linear-gradient(
      145deg,
      rgba(111, 91, 232, .28),
      rgba(47, 143, 218, .19)
    );
  color: #afbdff;
  font-size: .78rem;
}

.vton-result-download-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.vton-result-download-copy strong {
  overflow: hidden;
  color: #eef2ff;
  font-size: .65rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vton-result-download-copy small {
  overflow: hidden;
  color: #7f8eaf;
  font-size: .51rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vton-result-download-arrow {
  justify-self: end;
  color: #7082af;
  font-size: .66rem;
  transition: transform .22s ease;
}

.vton-result-download:hover
.vton-result-download-arrow {
  transform: translateX(3px);
  color: #a8b6e5;
}

@media (max-width: 620px) {
  .vton-result-download {
    min-height: 58px;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
  }

  .vton-result-download-icon {
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vton-result-download,
  .vton-result-download-arrow {
    transition: none !important;
  }
}

/* PIXICORE_VTON_QUALITY_RECOVERY_V5
   Lisibilité premium, contrôle qualité honnête et résultat sans dock intrusif. */

:root {
  --vton-readable-xs: clamp(.68rem, .64rem + .08vw, .78rem);
  --vton-readable-sm: clamp(.76rem, .71rem + .1vw, .88rem);
  --vton-readable-md: clamp(.88rem, .82rem + .12vw, 1rem);
}

.vton-panel-heading small,
.vton-filter-label,
.vton-photo-readiness-head span,
.vton-policy-switch small,
.vton-contract-preview small,
.vton-result-meta article,
.vton-result-layout aside p,
.vton-result-download-copy small {
  font-size: var(--vton-readable-xs);
}

.vton-panel-heading strong,
.vton-photo-readiness-head strong,
.vton-product-copy strong,
.vton-dock-status strong,
.vton-result-download-copy strong {
  font-size: var(--vton-readable-sm);
}

.vton-product-copy span,
.vton-product-copy small,
.vton-dock-status small,
.vton-result-loading-copy span {
  font-size: var(--vton-readable-xs);
  line-height: 1.45;
}

.vton-workspace {
  grid-template-columns: minmax(280px, .72fr) minmax(620px, 1.58fr) minmax(390px, .9fr);
  gap: 20px;
}

.vton-catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 2px 8px 8px 2px;
}

.vton-product-card {
  min-height: 292px;
  grid-template-rows: minmax(190px, 1fr) auto;
  border-radius: 18px;
}

.vton-product-copy {
  min-height: 86px;
  padding: 13px 14px 14px;
  gap: 5px;
}

.vton-product-card.is-selected {
  border-color: rgba(139, 119, 255, .72);
  box-shadow:
    0 0 0 2px rgba(123, 97, 255, .17),
    0 20px 48px rgba(8, 5, 34, .36),
    inset 0 1px rgba(255, 255, 255, .06);
}

.vton-photo-readiness[data-state="blocked"] {
  border-color: rgba(255, 137, 115, .4);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 122, 102, .12), transparent 34%),
    rgba(56, 16, 28, .48);
}

.vton-photo-readiness[data-state="blocked"] .vton-photo-readiness-head strong,
.vton-photo-readiness[data-state="blocked"] > p {
  color: #ffc6bb;
}

.vton-photo-readiness[data-state="blocked"] .vton-mini-ring {
  filter: saturate(.72) hue-rotate(125deg);
}

.vton-try-button.is-quality-blocked,
.vton-try-button.is-quality-blocked:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: linear-gradient(115deg, #59364d, #47395f 48%, #334a68);
  box-shadow: none;
}

.vton-try-button.is-quality-blocked > b {
  background: rgba(255, 192, 180, .11);
  color: #ffd0c6;
}

.vton-result-panel {
  width: min(1480px, 100%);
  margin: 26px auto 0;
}

.vton-result-layout {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 18px;
  padding: 18px;
}

.vton-result-visual {
  min-height: min(720px, 70vh);
  max-height: 74vh;
  padding: 12px;
  background:
    radial-gradient(circle at 50% 40%, rgba(65, 90, 151, .14), transparent 48%),
    #050d21;
}

.vton-result-visual img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(74vh - 24px);
  object-fit: contain;
  border-radius: 12px;
}

.vton-result-layout aside {
  align-self: start;
  position: sticky;
  top: 94px;
  padding: 18px;
}

.vton-result-meta article {
  min-height: 38px;
  align-items: center;
  padding: 10px 11px;
}

.vton-result-meta article strong {
  max-width: 58%;
  overflow-wrap: anywhere;
  text-align: right;
}

/* PIXICORE_VTON_SEGMENTATION_FIDELITY_V5_2 */

/* Le dock reste visible pendant le calcul, puis se retire du résultat final. */
.vton-page.vton-result-focus .vton-action-dock:not(.is-running) {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 32px));
}

.vton-action-dock {
  transition:
    opacity .28s ease,
    transform .34s cubic-bezier(.22, 1, .36, 1),
    box-shadow .28s ease;
}

@media (min-width: 1900px) and (max-width: 2399px) {
  :root { --vton-shell: min(2020px, calc(100vw - 48px)); }

  .vton-workspace {
    grid-template-columns: minmax(320px, .72fr) minmax(760px, 1.56fr) minmax(460px, .92fr);
  }

  .vton-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vton-product-card { min-height: 315px; grid-template-rows: minmax(215px, 1fr) auto; }
}

@media (min-width: 2400px) {
  :root { --vton-shell: min(2360px, calc(100vw - 72px)); }

  .vton-main { padding-top: 104px; }
  .vton-workspace {
    grid-template-columns: minmax(370px, .72fr) minmax(920px, 1.6fr) minmax(520px, .9fr);
    gap: 26px;
  }
  .vton-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .vton-product-card { min-height: 360px; grid-template-rows: minmax(250px, 1fr) auto; }
  .vton-panel { border-radius: 28px; }
  .vton-result-panel { width: min(1900px, 100%); }
  .vton-result-layout { grid-template-columns: minmax(0, 1fr) 440px; }
}

@media (max-width: 1540px) {
  .vton-workspace {
    grid-template-columns: minmax(260px, .68fr) minmax(560px, 1.5fr) minmax(350px, .86fr);
    gap: 14px;
  }
  .vton-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .vton-product-card { min-height: 270px; grid-template-rows: minmax(175px, 1fr) auto; }
  .vton-result-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 1240px) {
  .vton-workspace { grid-template-columns: minmax(270px, .7fr) minmax(0, 1.3fr); }
  .vton-viewer-panel { grid-column: 1 / -1; }
  .vton-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .vton-workspace { grid-template-columns: 1fr; }
  .vton-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vton-result-layout { grid-template-columns: 1fr; }
  .vton-result-layout aside { position: static; }
  .vton-result-visual { min-height: 460px; max-height: none; }
  .vton-result-visual img { max-height: 68vh; }
}

@media (max-width: 680px) {
  .vton-catalog-grid { grid-template-columns: 1fr; }
  .vton-product-card {
    min-height: 180px;
    grid-template-columns: 132px minmax(0, 1fr);
    grid-template-rows: 180px;
  }
  .vton-product-copy { min-height: 0; align-content: center; }
  .vton-result-panel { border-radius: 20px; }
  .vton-result-layout { padding: 9px; }
  .vton-result-visual { min-height: 390px; padding: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .vton-action-dock { transition: none !important; }
}


/* PIXICORE_VTON_WARDROBE_STABLE_V5_8_2 */

.vton-catalog-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding: 0 5px 5px 0;
}
.vton-catalog-group {
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  content-visibility: visible;
  contain-intrinsic-size: auto var(--vton-group-size-4, 440px);
}
.vton-catalog-group.is-catalog-group-deferred { content-visibility: auto; }
.vton-catalog-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(135,155,215,.12);
  border-radius: 14px;
  background: rgba(6,13,32,.55);
}
.vton-catalog-group-head span { display: inline-flex; align-items: center; gap: 9px; color: #eef2ff; font-size: .82rem; font-weight: 800; }
.vton-catalog-group-head i { color: #8b72ff; }
.vton-catalog-group-head small { min-width: 30px; padding: 3px 8px; border-radius: 999px; background: rgba(139,114,255,.12); color: #b9c5e4; text-align: center; font-weight: 800; }
.vton-catalog-group-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.vton-detail-advisories { margin-top: 10px; display: grid; gap: 8px; }
.vton-detail-note { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; padding: 10px 12px; border: 1px solid rgba(130,149,204,.13); border-radius: 13px; background: rgba(9,17,37,.52); }
.vton-detail-note i { margin-top: 2px; color: #efb863; }
.vton-detail-note small { color: #aab6d5; line-height: 1.45; }
.vton-size-disabled { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px dashed rgba(127,145,198,.35); border-radius: 999px; color: #9caacc; font-size: .76rem; font-weight: 750; }
@media (max-width: 1279px) {
  .vton-catalog-group { contain-intrinsic-size: auto var(--vton-group-size-3, 440px); }
  .vton-catalog-group-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .vton-catalog-group { contain-intrinsic-size: auto var(--vton-group-size-2, 440px); }
  .vton-catalog-group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .vton-catalog-group { contain-intrinsic-size: auto var(--vton-group-size-1, 440px); }
  .vton-catalog-group-grid { grid-template-columns: 1fr; }
  .vton-catalog-group-head { position: sticky; top: 0; z-index: 2; backdrop-filter: blur(12px); }
}

/* PIXICORE_VTON_PERFORMANCE_V20 */
.vton-hero-garment picture {
  display: block;
  width: 100%;
  height: 100%;
}

.vton-hero-garment {
  animation: none;
  backface-visibility: hidden;
  filter: none;
  transform: translate3d(0, 7px, 0) rotateY(-2deg) rotateZ(-.6deg);
  transform-origin: 50% 52%;
  will-change: auto;
}

body.vton-motion-ready .vton-hero-garment {
  animation: garmentFloatPremium 6.2s var(--vton-ease) infinite;
  will-change: transform;
}

.vton-hero-garment picture,
.vton-hero-garment img {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.vton-hero-garment picture {
  filter: drop-shadow(0 30px 28px rgba(0, 0, 0, .3));
}

.vton-float-card,
.vton-hero-metrics {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.vton-nav {
  background: rgba(4, 9, 25, .96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.vton-action-dock {
  background: rgba(5, 12, 31, .96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.vton-page.is-page-hidden .vton-hero-garment {
  animation-play-state: paused !important;
}

.vton-workspace {
  scroll-margin-top: calc(var(--nav-height) + 18px);
}

.vton-catalog-panel {
  height: clamp(760px, calc(100svh - var(--nav-height) - 18px), 980px);
  min-height: 0;
}

.vton-product-card {
  height: 294px;
  min-height: 294px;
  grid-template-rows: minmax(0, 1fr) 86px;
  content-visibility: visible !important;
  contain: none !important;
}

.vton-page:not(.vton-dock-ready) .vton-action-dock:not(.is-running) {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(100% + 32px));
}

.vton-intelligence-panel {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}

/* PIXICORE_VTON_LAYOUT_RECOVERY_V19
   Le catalogue et les sections suivantes restent dans un flux de page lisible. */
html {
  scroll-padding-top: calc(var(--nav-height) + 24px);
}

.vton-main {
  padding-bottom: calc(var(--dock-height) + clamp(280px, 20vh, 380px));
}

.vton-workspace,
html.vton-macos .vton-workspace {
  align-items: start;
}

.vton-person-panel,
.vton-viewer-panel {
  align-self: start;
}

.vton-catalog-panel,
html.vton-macos .vton-catalog-panel {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.vton-catalog-grid,
html.vton-macos .vton-catalog-grid {
  flex: none;
  overflow: visible;
  max-height: none;
  padding: 0;
  scrollbar-gutter: auto;
}

.vton-intelligence-panel {
  margin-top: clamp(36px, 4vw, 72px);
  padding: clamp(22px, 2.35vw, 36px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 18%, rgba(122, 92, 255, .12), transparent 24%),
    radial-gradient(circle at 88% 76%, rgba(45, 212, 191, .08), transparent 22%),
    linear-gradient(145deg, rgba(9, 19, 45, .985), rgba(4, 11, 29, .992));
  box-shadow: 0 30px 84px rgba(0, 4, 20, .42), inset 0 1px rgba(255, 255, 255, .06);
  content-visibility: visible;
  contain-intrinsic-size: auto;
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

.vton-intelligence-head h2 {
  font-size: clamp(1.35rem, 1.8vw, 2.25rem);
  letter-spacing: -.025em;
}

.vton-fidelity-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
}

.vton-fidelity-gauges {
  align-items: stretch;
  grid-auto-rows: minmax(148px, auto);
}

.vton-fidelity-card {
  min-height: 148px;
  padding: 14px;
  grid-template-rows: auto auto 1fr auto;
}

.vton-fidelity-card input[type="range"] {
  align-self: end;
}

.vton-policy-card {
  align-self: start;
}

#vtonWorkspace,
#vtonResultPanel {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

@media (max-width: 980px) {
  .vton-fidelity-layout {
    grid-template-columns: 1fr;
  }

  .vton-fidelity-gauges {
    grid-template-columns: 1fr;
  }

  .vton-policy-card {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .vton-intelligence-panel {
    padding: 18px 12px;
  }

  .vton-intelligence-head {
    gap: 16px;
  }

  .vton-intelligence-head h2 {
    font-size: 1.48rem;
    line-height: 1.08;
  }

  .vton-contract-badge {
    min-width: 0;
  }

  .vton-fidelity-gauges {
    gap: 10px;
    grid-auto-rows: minmax(112px, auto);
  }

  .vton-fidelity-card {
    min-height: 112px;
    padding: 11px 12px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px 8px;
  }

  .vton-fidelity-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .vton-fidelity-copy small {
    font-size: .48rem;
    line-height: 1.35;
  }

  .vton-fidelity-value output {
    font-size: 1.16rem;
  }

  .vton-fidelity-track {
    height: 6px;
  }
}

.vton-catalog-skeleton {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.vton-catalog-skeleton span {
  display: block;
  height: 294px;
  border: 1px solid rgba(126, 146, 207, .1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(31, 52, 96, .45) 0 70%, rgba(12, 25, 55, .82) 70%),
    #081229;
  animation: vtonCatalogSkeleton 1.2s ease-in-out infinite alternate;
}

.vton-catalog-skeleton span:nth-child(2) { animation-delay: -.2s; }
.vton-catalog-skeleton span:nth-child(3) { animation-delay: -.4s; }
.vton-catalog-skeleton span:nth-child(4) { animation-delay: -.6s; }

@keyframes vtonCatalogSkeleton {
  from { opacity: .42; }
  to { opacity: .78; }
}

@media (max-width: 1279px) {
  .vton-catalog-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .vton-catalog-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .vton-catalog-skeleton { grid-template-columns: 1fr; }
}

html.vton-is-scrolling .vton-ambient-orb,
html.vton-is-scrolling .vton-ambient-thread,
html.vton-is-scrolling .vton-orbit-system *,
html.vton-is-scrolling .vton-garment-aura,
html.vton-is-scrolling .vton-float-card,
html.vton-is-scrolling .vton-stage-depth i {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  body.vton-motion-ready .vton-hero-garment {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

@media (max-width: 767px) {
  .vton-ambient-noise {
    display: none;
  }
}

@media (max-width: 980px) {
  .vton-intelligence-panel {
    contain-intrinsic-size: auto 1060px;
  }

}

@media (max-width: 680px) {
  .vton-intelligence-panel {
    contain-intrinsic-size: auto 1180px;
  }

  .vton-product-card {
    height: 182px;
    min-height: 182px;
    grid-template-rows: 180px;
    contain-intrinsic-size: auto 182px;
  }
}

@media (min-width: 1900px) {
  .vton-catalog-group {
    contain-intrinsic-size: auto var(--vton-group-size-wide, 440px);
  }

  .vton-product-card {
    height: 315px;
    min-height: 315px;
    contain-intrinsic-size: auto 315px;
  }
}

@media (min-width: 2400px) {
  .vton-catalog-group {
    contain-intrinsic-size: auto var(--vton-group-size-ultra, 440px);
  }

  .vton-product-card {
    height: 360px;
    min-height: 360px;
    contain-intrinsic-size: auto 360px;
  }
}