.hvp{-webkit-user-select:none;user-select:none;margin:0 0 1.25em;padding:16px;border:1px solid #e4dff0;border-radius:12px;background:#fff;max-width:520px}
.hvp__title{margin:0 0 10px;font-weight:700;font-size:1.05em;color:#1d1630}
.hvp__stage{position:relative;width:100%;max-width:100%;aspect-ratio:1/1;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #efeaf7;user-select:none;-webkit-user-select:none;touch-action:none}
.hvp__product{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.hvp__area{position:absolute;outline:1.5px dashed #6f35e8;outline-offset:0;background:rgba(111,53,232,.06)}
.hvp__area-label{position:absolute;left:0;bottom:100%;margin-bottom:3px;font-size:11px;line-height:1.2;white-space:nowrap;background:#6f35e8;color:#fff;padding:2px 6px;border-radius:4px;pointer-events:none}
.hvp--has-logo .hvp__area{background:transparent}
.hvp__logo{position:absolute;background-repeat:no-repeat;background-size:100% 100%;cursor:move;outline:1px solid rgba(111,53,232,.0);touch-action:none}
.hvp__logo:hover,.hvp__logo:focus,.hvp__logo--active{outline:1px solid rgba(111,53,232,.7)}
.hvp__logo:focus-visible{outline:2px solid #6f35e8}
.hvp__handle{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:50%;background:#6f35e8;border:2px solid #fff;box-shadow:0 0 0 1px #6f35e8;cursor:nwse-resize}
.hvp__controls{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}
.hvp__controls input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hvp__file{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:#6f35e8;color:#fff!important;border:0;border-radius:999px;padding:.6em 1.2em;font-weight:600;line-height:1.2;text-decoration:none}
.hvp__file:hover{background:#5a27c4}
.hvp__controls input[type=file]:focus-visible+.hvp__file{outline:2px solid #1d1630;outline-offset:2px}
.hvp__check{display:inline-flex;align-items:center;gap:6px;font-size:.92em;cursor:pointer}
.hvp__reset{background:none;border:0;padding:0;color:#6f35e8;text-decoration:underline;cursor:pointer;font-size:.92em}
.hvp__status{margin:10px 0 0;font-size:.88em;color:#665f7a}
.hvp__status--ok{color:#1d7a52}
.hvp__status--error{color:#b42318;font-weight:600}
.hvp__status--busy{color:#6f35e8}
.hvp-cart-thumb{border-radius:6px;border:1px solid #eee}
.hvp__inner{position:absolute;transform-origin:center center}
.hvp__status{-webkit-user-select:text;user-select:text}
.hvp__mark{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:.85em;color:#665f7a}
.hvp__swatch{width:16px;height:10px;outline:1.5px dashed #6f35e8;flex:none}
.hvp__logo{transform-origin:50% 50%}
.hvp--has-logo .hvp__area{display:none}
.hvp__area{outline-color:rgba(111,53,232,.55)}
.hvp__mark{display:block}
.hvp__rotate{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:12px;font-size:.92em}
.hvp__rotate[hidden]{display:none}
.hvp__rotate label{font-weight:600;color:#1d1630}
.hvp__rotate input[type=range]{flex:1 1 160px;min-width:120px;accent-color:#6f35e8;margin:0}
.hvp__rot-val{min-width:3.2em;color:#665f7a;font-variant-numeric:tabular-nums}
.hvp__rot90{background:#f3eefd;color:#5a27c4;border:1px solid #d9ccf7;border-radius:999px;padding:.35em .9em;cursor:pointer;font-size:.92em;line-height:1.2}
.hvp__rot90:hover{background:#e9e0fc}
.hvp{box-sizing:border-box;flex:1 1 100%;min-width:0;max-width:min(520px,100%)}
.hvp{grid-column:1/-1;width:0;min-width:100%}
.hvp-min{grid-column:1/-1;flex:1 1 100%;width:100%;margin:0 0 .6em;font-size:.95em;color:#1d1630}
.hvp-total{grid-column:1/-1;flex:1 1 100%;width:100%;margin:.7em 0 0;font-size:1.05em;color:#1d1630}
.hvp-total strong{color:#6f35e8;font-size:1.1em}
.hvp-total--low{color:#b42318}
.hvp-ud{font-size:.8em;font-weight:400}