.stock-visual-panel{--stock-green:#38ad85;--stock-amber:#dbab51;--stock-blue:#6da5ed;--stock-rose:#e07c89;--stock-grey:#98a3af}
.stock-visual-panel [data-stock-tone=available]{--stock-tone:var(--stock-green)}
.stock-visual-panel [data-stock-tone=reserved]{--stock-tone:var(--stock-amber)}
.stock-visual-panel [data-stock-tone=transit]{--stock-tone:var(--stock-blue)}
.stock-visual-panel [data-stock-tone=needed]{--stock-tone:var(--stock-rose)}
.stock-visual-panel [data-stock-tone=empty],.stock-visual-panel [data-stock-tone=unknown]{--stock-tone:var(--stock-grey)}
html body #main .stock-visual-panel .stock-summary{gap:8px;margin:12px 0}
html body #main .stock-visual-panel .stock-stat{position:relative;border:1px solid var(--line);border-top:3px solid var(--stock-tone,var(--focus));border-radius:8px;min-width:130px;padding:10px 16px;background:var(--surface,var(--panel));text-align:left}
.stock-visual-panel .stock-stat[data-stock-filter=available]{--stock-tone:var(--stock-green)}
.stock-visual-panel .stock-stat[data-stock-filter=transit]{--stock-tone:var(--stock-blue)}
.stock-visual-panel .stock-stat[data-stock-filter=needed]{--stock-tone:var(--stock-rose)}
html body #main .stock-visual-panel .stock-stat strong{font-size:25px;color:var(--stock-tone,var(--ink));line-height:1.2}
html body #main .stock-visual-panel .stock-stat.active{background:var(--selected);outline:1px solid var(--stock-tone,var(--focus));outline-offset:-1px}
.stock-legend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:9px 2px 13px;color:var(--muted);font-size:11px}
.stock-legend span{display:inline-flex;align-items:center;gap:6px}
.stock-legend span:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--stock-tone);flex-shrink:0}
html body #main .stock-visual-panel .stock-sheet td{height:68px!important;vertical-align:middle;font-size:12px}
html body #main .stock-visual-panel .stock-sheet tbody th{border-left:3px solid var(--stock-tone,var(--line));color:var(--muted);background:var(--surface,var(--panel))}
.stock-model-cell{display:flex;align-items:center;gap:10px;min-width:0}
.stock-model-cell>span{font-weight:600;line-height:1.4;overflow-wrap:anywhere}
html body #main .stock-visual-panel .stock-photo{position:relative;display:block;flex-shrink:0;width:50px;height:50px!important;min-height:50px;margin:0;padding:4px!important;border:1px solid #e3e8ed;border-radius:7px;background:#f7f9fb;overflow:hidden;cursor:zoom-in;box-shadow:none}
.stock-photo:after{content:'';position:absolute;bottom:4px;left:14%;width:72%;height:5px;border-radius:50%;background:#24354a28;filter:blur(3px);pointer-events:none}
.stock-photo img{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.stock-photo svg{display:block;width:27px;height:27px;margin:auto;fill:none;stroke:#9aabb9;stroke-width:1.4}
html body #main .stock-photo:disabled{opacity:.6;cursor:default}
html body #main .stock-visual-panel .stock-photo-large{width:100%;height:180px!important;margin:0 0 12px;padding:12px!important;border-radius:7px}
html body #main .stock-visual-panel .cards>.card{position:relative;border-top:3px solid var(--stock-tone);padding:14px;border-radius:9px;min-width:0}
.stock-state{display:inline-block;color:var(--ink);font-size:11px;padding:4px 8px;margin-bottom:7px;border-radius:5px;border:1px solid color-mix(in srgb,var(--stock-tone) 45%,transparent);background:color-mix(in srgb,var(--stock-tone) 13%,transparent)}
html body #main .stock-visual-panel .stock-onhand{font-weight:700;color:var(--stock-green)}
html body #main .stock-visual-panel .stock-needed{color:var(--stock-rose);font-weight:600}
html body #main .stock-visual-panel .stock-transit{color:var(--stock-blue);font-weight:600}
html body .stock-photo-dialog{width:min(580px,94vw);max-width:94vw;max-height:92dvh;overflow:auto;padding:20px;background:var(--surface,var(--panel));color:var(--ink);border:1px solid var(--line);border-radius:12px}
.stock-photo-dialog>button{float:right}.stock-photo-dialog>h2{font-size:19px;padding-right:90px}.stock-photo-dialog>img{display:block;width:100%;max-height:65dvh;object-fit:contain;background:#f7f9fb;border-radius:8px;margin:14px 0}.stock-photo-dialog>a{display:inline-flex}
@media(max-width:760px){html body #main .stock-visual-panel .stock-stat{min-width:115px;padding:9px 12px}.stock-legend{gap:7px 12px}html body #main .stock-visual-panel .stock-photo-large{height:160px!important}}

.stock-visual-panel:has(#stock-body>.cards) .sheet-formula{display:none}
.stock-visual-panel .stock-photo:focus-visible{outline:2px solid var(--focus);outline-offset:2px}