:root { --v2-ink:#132239; --v2-blue:#315b8b; --v2-panel:#f6f9fc; --v2-line:#9badc0; --v2-green:#32e681; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; color:var(--v2-ink); font-family:Georgia, "Times New Roman", serif; background:radial-gradient(circle at 20% 0%, #eaf4ff 0, transparent 38%), linear-gradient(145deg,#dfe9f3,#f8fafc 52%,#d8e2ee); }
body.v2-scanning { height:var(--v2-visible-height,100dvh); min-height:0; overflow:hidden; overscroll-behavior:none; }
button,input { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.v2-app { min-height:100dvh; }
.v2-setup { width:min(100%, 560px); margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 20px 24px; }
.v2-back { color:#294f7a; font-family:Arial,sans-serif; font-size:.9rem; text-decoration:none; }
.v2-setup h1 { margin:20px 0 5px; font-size:2rem; }
.v2-lede { margin:0 0 20px; color:#51677f; font-family:Arial,sans-serif; line-height:1.4; }
.v2-setup-card { display:grid; gap:14px; padding:20px; border:1px solid #b9c9d9; border-radius:18px; background:rgba(255,255,255,.9); box-shadow:0 18px 45px rgba(24,52,84,.13); }
.v2-setup-card label { display:grid; gap:6px; color:#29435e; font-family:Arial,sans-serif; font-size:.86rem; font-weight:700; }
.v2-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.v2-setup-card input,.v2-setup-card select { width:100%; padding:10px 11px; border:1px solid #9fb4c9; border-radius:9px; background:#fff; color:#132239; font-size:1rem; }
.v2-setup-card label span { margin-top:-4px; color:#6c8299; font-size:.72rem; font-weight:400; }
.v2-number-control { position:relative; display:block; margin:0!important; color:inherit!important; font-size:inherit!important; }
.v2-number-control input { padding-right:34px; appearance:textfield; }
.v2-number-control input::-webkit-inner-spin-button,.v2-number-control input::-webkit-outer-spin-button { appearance:none; margin:0; }
.v2-step-buttons { position:absolute; inset:1px 1px 1px auto; width:30px; display:grid; grid-template-rows:1fr 1fr; margin:0!important; overflow:hidden; border-left:1px solid #b2c2d2; border-radius:0 8px 8px 0; }
.v2-step-buttons button { min-height:0; border:0; background:#edf3f8; color:#294f72; padding:0; font-family:Arial,sans-serif; font-size:.55rem; line-height:1; }
.v2-step-buttons button + button { border-top:1px solid #b2c2d2; }
.v2-primary,.v2-done { border:0; border-radius:11px; background:#1d5d96; color:#fff; padding:13px 16px; font-family:Arial,sans-serif; font-weight:800; }
.v2-status { min-height:1.2em; margin:0; color:#37617e; font-family:Arial,sans-serif; font-size:.84rem; }
.v2-scanner { position:fixed; inset:0; z-index:10; width:100%; height:var(--v2-visible-height,100dvh); min-height:0; max-height:var(--v2-visible-height,100dvh); display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:none; padding:calc(8px + env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
.v2-scan-head { flex:none; display:grid; gap:7px; }
.v2-scan-form { display:flex; gap:7px; }
.v2-scan-form input { min-width:0; flex:1; border:2px solid #6d89aa; border-radius:10px; padding:10px 12px; font-family:Arial,sans-serif; font-size:16px!important; touch-action:manipulation; }
.v2-scan-form button,.v2-toggle,.v2-next,.v2-previous { border:1px solid #577493; background:#f8fbff; color:#183c62; padding:9px 11px; font-family:Arial,sans-serif; font-weight:800; }
.v2-scan-form button,.v2-toggle { border-radius:10px; }
.v2-tools { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.v2-position { color:#46627d; font-family:Arial,sans-serif; font-size:.78rem; font-weight:700; }
.v2-tool-buttons { flex:none; display:flex; align-items:stretch; gap:5px; }
.v2-icon-btn { width:38px; border:1px solid #577493; border-radius:9px; background:#f8fbff; color:#183c62; padding:6px; font-family:Arial,sans-serif; font-size:1.35rem; font-weight:900; line-height:1; }
.v2-icon-btn svg { display:block; width:100%; height:100%; fill:currentColor; }
.v2-icon-btn.v2-photo-ready { border-color:#18704a; background:#dff9e9; color:#145238; }
.v2-toggle[aria-pressed="true"] { border-color:#176b4a; background:#dff9e9; color:#145238; }
.v2-scan-status { flex:none; padding:3px 3px 5px; }
.v2-zoom-stage { position:relative; flex:1; min-height:0; overflow:hidden; display:grid; place-items:center; touch-action:none; }
.v2-gondola { position:relative; width:min(92vw, 440px); max-height:100%; aspect-ratio:36 / 54; overflow:hidden; transform-origin:center center; border:7px solid #40566f; border-top-width:11px; border-radius:3px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 32px), linear-gradient(135deg,#b9cde2,#e9f1f8 48%,#b8c9dd); box-shadow:inset 0 0 0 3px #7d94ac, 0 9px 24px rgba(19,45,70,.25); }
.v2-shelf { position:absolute; left:4px; right:4px; display:flex; align-items:flex-end; gap:2px; padding:2px 3px 7px; border-bottom:7px solid #536c84; background:linear-gradient(to bottom,transparent 0 70%,rgba(255,255,255,.18) 70% 100%); }
.v2-tile { position:relative; flex:0 0 var(--slot-basis, calc((100% - 12px) / 9)); min-width:15px; height:var(--item-height,64%); display:flex; flex-direction:column; justify-content:flex-end; color:#10263c; }
.v2-product-face { min-height:0; flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(15,42,65,.55); border-radius:2px 2px 0 0; background:#f6f6f0; box-shadow:1px 0 2px rgba(0,0,0,.2); }
.v2-tile.v2-selected .v2-product-face { outline:3px solid #ffb000; outline-offset:1px; }
.v2-product-face img { width:100%; height:100%; object-fit:contain; background:#fff; pointer-events:none; }
.v2-tile-name { max-height:100%; overflow:hidden; padding:2px; font-family:Arial,sans-serif; font-size:clamp(5px,1.6vw,9px); font-weight:800; line-height:1.05; text-align:center; }
.v2-sales { flex:none; min-height:12px; margin-top:1px; padding:1px; border:1px solid #e7edf3; background:#fff; color:#142e47; font-family:Arial,sans-serif; font-size:clamp(8px,2.6vw,15px); font-weight:900; line-height:1; text-align:center; white-space:nowrap; overflow:hidden; }
.v2-unknown { padding:2px; background:#fff7d7; color:#704c00; font-family:Arial,sans-serif; font-size:clamp(6px,1.7vw,10px); font-weight:800; line-height:1.1; text-align:center; overflow-wrap:anywhere; }
.v2-placeholder { flex:0 0 var(--slot-basis, calc((100% - 12px) / 9)); min-width:15px; height:var(--placeholder-height,64%); border:2px solid #d9ffe9; border-radius:3px 3px 0 0; background:rgba(41,239,124,.35); box-shadow:0 0 5px 2px #25ee82, inset 0 0 8px rgba(255,255,255,.8); animation:v2-glow 1.1s ease-in-out infinite alternate; }
@keyframes v2-glow { to { background:rgba(41,239,124,.62); box-shadow:0 0 9px 4px #25ee82, inset 0 0 10px rgba(255,255,255,.9); } }
.v2-actions { position:relative; z-index:12; flex:none; display:flex; gap:8px; padding-top:8px; background:linear-gradient(to bottom,rgba(232,240,247,0),rgba(232,240,247,.98) 7px); }
.v2-shelf-nav { flex:1; display:flex; }
.v2-previous { flex:0 0 22%; border-radius:10px 0 0 10px; border-right:0; font-size:1.25rem; }
.v2-previous:disabled { opacity:.42; }
.v2-next { flex:1; border-radius:0 10px 10px 0; background:#fff; }
.v2-done { flex:0 0 28%; }
.v2-details { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; gap:16px; overflow:hidden; padding:calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(150deg,#e5eef7,#fff 55%,#dce8f2); }
.v2-detail-head { flex:none; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-family:Arial,sans-serif; font-size:1.05rem; }
.v2-detail-head strong { text-align:center; }
.v2-detail-head button { border:1px solid #7790aa; border-radius:9px; background:#fff; color:#183c62; padding:9px 12px; font-weight:800; }
.v2-detail-head .v2-detail-edit { padding:7px 11px; font-size:.82rem; }
.v2-detail-content { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12px; border:1px solid #b9c9d9; border-radius:16px; background:rgba(255,255,255,.9); font-family:Arial,sans-serif; text-align:center; }
.v2-detail-content img { width:min(56vw,230px); max-height:32dvh; object-fit:contain; }
.v2-detail-content h2 { margin:0; font-family:Georgia,"Times New Roman",serif; }
.v2-detail-grid { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:left; }
.v2-detail-grid span { padding:9px; border-radius:8px; background:#edf3f8; font-size:.85rem; }
.v2-detail-form { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; text-align:left; }
.v2-detail-form label { display:grid; gap:3px; color:#29435e; font-size:.72rem; font-weight:800; }
.v2-detail-form label:first-child { grid-column:1 / -1; }
.v2-detail-form input { min-width:0; width:100%; border:1px solid #9fb4c9; border-radius:8px; padding:8px; background:#fff; color:#132239; font-size:16px; }
.v2-detail-actions { flex:none; display:flex; gap:8px; }
.v2-detail-actions button { flex:1; border:0; border-radius:11px; padding:13px 10px; font-family:Arial,sans-serif; font-weight:800; }
.v2-remove { background:#a72d3c; color:#fff; }
.v2-detail-save { background:#1d5d96; color:#fff; }
.v2-detail-cancel { border:1px solid #7790aa!important; background:#fff; color:#183c62; }
@media (max-height:650px) { .v2-details { gap:8px; padding-top:calc(7px + env(safe-area-inset-top)); padding-bottom:calc(7px + env(safe-area-inset-bottom)); } .v2-detail-content { padding:8px; } .v2-detail-content img { max-height:22dvh; } .v2-detail-grid span { padding:6px; } .v2-detail-form { gap:5px; } .v2-detail-form input { padding:6px; } .v2-detail-actions button { padding:9px; } }
@media (max-height:620px) { .v2-scanner { min-height:0; } .v2-scan-status { font-size:.72rem; padding:1px; } .v2-scan-form input,.v2-scan-form button,.v2-toggle { padding:7px 9px; } .v2-icon-btn { width:34px; padding:5px; } .v2-actions { padding-top:5px; } .v2-next,.v2-done { padding:10px; } }
@media (max-width:390px) { .v2-position { font-size:.68rem; } .v2-tool-buttons { gap:3px; } .v2-icon-btn { width:34px; } .v2-toggle { padding-inline:7px; } }