.vender-page { max-width: 860px; padding-left: 1.25rem; padding-right: 1.25rem; }
.vender-head { text-align: left; margin: .3rem 0 1.6rem; max-width: 760px; }
.vender-head .listing-seo-h1 { margin: 0 0 .5rem; }
.vender-sub { font-family: var(--font-head); font-size: 1.12rem; font-weight: 700; color: var(--text); margin: 0 0 .6rem; }
.vender-desc { font-size: .92rem; line-height: 1.6; color: var(--muted); margin: 0; }
.vp-steps { list-style: none; display: flex; padding: 0; margin: 0 0 1.8rem; }
.vp-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; cursor: pointer; }
.vp-step:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: calc(50% + 16px); width: calc(100% - 32px); height: 2px; background: var(--border); }
.vp-step.done::after { background: var(--ac); }
.vp-step-n { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; background: var(--card); color: var(--muted); border: 2px solid var(--border); transition: background .2s, color .2s, border-color .2s; }
.vp-step.on .vp-step-n, .vp-step.done .vp-step-n { background: var(--ac); color: #fff; border-color: var(--ac); }
.vp-step-l { font-size: .82rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.vp-step.on .vp-step-l, .vp-step.done .vp-step-l { color: var(--text); }
.vp-form { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem; }
.vp-panel-title { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 0 0 1.1rem; }
.vp-trust { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem 1.2rem; margin-top: 1rem; }
.vp-trust span { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--text); }
.vp-trust svg { color: var(--ac); flex-shrink: 0; }
.vp-sub { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1.4rem 0 .8rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.vp-panel > .vp-sub:first-of-type { margin-top: .2rem; }
.vp-help { display: block; font-size: .74rem; color: var(--muted); margin-top: .3rem; line-height: 1.35; }
.vp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.vp-grid-full { grid-column: 1 / -1; }
.vp-grid .form-row { margin: 0; }
.vp-form .form-label { display: block; font-size: .82rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.vp-req { color: var(--ac); }
.vp-rec { font-weight: 500; color: var(--muted); font-size: .74rem; }
.vp-rec { color: #e9872b !important; }.vp-form .form-input { width: 100%; box-sizing: border-box; padding: .72rem .85rem; border: 1.5px solid var(--border); border-radius: 9px; font-size: .9rem; font-family: inherit; background: var(--bg); color: var(--text); transition: border-color .14s; }
.vp-form .form-input:focus { outline: none; border-color: var(--ac); }
.vp-form .form-input.vp-err { border-color: #e11d48; background: color-mix(in srgb, #e11d48 5%, var(--bg)); }
.vp-hidden { display: none !important; }
.vp-manual-hint { font-size: .82rem; color: var(--ac); background: color-mix(in srgb, var(--ac) 8%, var(--card)); border-radius: 8px; padding: .55rem .75rem; margin: 0 0 1.1rem; }
.vp-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: 1.2rem; }
.vp-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 74px; padding: .7rem .5rem; border: 1.5px solid var(--border); border-radius: 11px; background: var(--bg); cursor: pointer; transition: border-color .14s, background .14s, transform .12s; text-align: center; }
.vp-type-ico { width: 26px; height: 26px; color: var(--muted); }
.vp-type.on .vp-type-ico { color: var(--ac); }
.vp-type span { font-weight: 700; font-size: .85rem; color: var(--text); }
.vp-type input { position: absolute; opacity: 0; pointer-events: none; }
.vp-type.on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 9%, var(--card)); }
.vp-type.on span { color: var(--ac); }
.vp-type:hover { transform: translateY(-1px); }
.vp-seg { display: flex; gap: .5rem; }
.vp-seg label { flex: 1; display: flex; align-items: center; justify-content: center; padding: .6rem; border: 1.5px solid var(--border); border-radius: 9px; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--text); background: var(--bg); transition: all .14s; }
.vp-seg label.on { background: color-mix(in srgb, var(--ac) 12%, var(--card)); border-color: var(--ac); color: var(--ac); }
.vp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.vp-area.vp-locked { display: none; }
.vp-form .pb-btn:disabled { opacity: .45; cursor: not-allowed; }
.vp-form .pb-btn:disabled:hover { transform: none; }
.vp-form .form-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--text); margin-top: 1.2rem; line-height: 1.4; }
.vp-form .form-check a { color: var(--ac); font-weight: 600; }
.vp-foot-note { font-size: .82rem; color: var(--muted); margin: 1.1rem 0 0; line-height: 1.5; }
.vp-photos-intro { font-size: .9rem; color: var(--muted); margin: 0 0 1.1rem; }
.vp-photo-mode { margin-bottom: 1.2rem; }
.vp-photo-mode .form-label { display: block; margin-bottom: .45rem; }
.vp-photo-mode .vp-seg { flex-direction: column; }
@keyframes vphShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-4px)} 40%,80%{transform:translateX(4px)} }
.vph-slot--shake { animation: vphShake .5s ease; border-color: var(--ac); }
.vph-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.vph-slot { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem; border: 1.5px dashed var(--border); border-radius: 11px; background: var(--bg); cursor: pointer; transition: border-color .14s; min-height: 64px; }
.vph-slot:hover { border-color: var(--ac); }
.vph-slot.on { border-style: solid; border-color: var(--ac); }
.vph-slot--opt { grid-column: 1 / -1; }
.vph-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vph-thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; background: color-mix(in srgb, var(--ac) 8%, var(--card)); display: flex; align-items: center; justify-content: center; color: var(--ac); overflow: hidden; position: relative; }
.vph-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vph-count { position: absolute; bottom: 0; right: 0; background: var(--ac); color: #fff; font-size: .68rem; font-weight: 700; padding: 0 .3rem; border-top-left-radius: 6px; }
.vph-meta { display: flex; flex-direction: column; min-width: 0; }
.vph-meta strong { font-size: .85rem; color: var(--text); font-weight: 700; }
.vph-meta strong em { font-style: normal; font-weight: 500; color: var(--muted); }
.vph-meta small { font-size: .74rem; color: var(--muted); line-height: 1.3; }
@media (max-width: 640px) { .vph-grid { grid-template-columns: 1fr; } }
.vph-cv, .vph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vph-spin { width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--ac) 28%, transparent); border-top-color: var(--ac); border-radius: 50%; animation: vphspin .6s linear infinite; }
@keyframes vphspin { to { transform: rotate(360deg); } }
.vph-rm { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(15,23,42,.72); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; transition: background .14s; }
.vph-rm:hover { background: #e11d48; }
.vp-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.vp-back { display: inline-flex; align-items: center; background: var(--bg); border: 1.5px solid var(--border); color: var(--text); font-weight: 600; font-size: .85rem; cursor: pointer; padding: .55rem 1.1rem; border-radius: 8px; transition: background .14s, border-color .14s; }
.vp-back:hover { background: color-mix(in srgb, var(--text) 6%, var(--bg)); border-color: var(--muted); }
.vp-success { display: none; text-align: center; padding: 2.5rem 1rem; }
.vp-success svg { color: var(--ac); margin: 0 auto .8rem; display: block; }
.vp-success p { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; color: var(--text); margin: 0 0 .4rem; }
.vp-success span { color: var(--muted); }
@media (max-width: 640px) {
  .vp-step-l { font-size: .73rem; }
  .vp-step-n { width: 28px; height: 28px; }
  .vp-step:not(:last-child)::after { top: 14px; left: calc(50% + 14px); width: calc(100% - 28px); }
  .vp-grid { grid-template-columns: 1fr; }
  .vp-types { display: flex; flex-wrap: nowrap; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 1.2rem; }
  .vp-types::-webkit-scrollbar { display: none; }
  .vp-type { flex: 0 0 42%; scroll-snap-align: start; }
  .vp-form { padding: 1.1rem; }
  .vp-seg--3 { flex-direction: column; }
}