#storageBoardLaunch{position:fixed;right:14px;top:50%;z-index:9000;border:1px solid #b8a58d;border-radius:50%;width:48px;height:48px;background:#59452f;color:#fffaf2;font-weight:700;box-shadow:0 3px 12px #59452f44}#storageBoard{position:fixed;inset:0;z-index:99999;font:14px Arial,sans-serif;color:#29251f}.sb-shade{position:absolute;inset:0;background:#211a15a8;display:flex;align-items:center;justify-content:center;padding:12px}.sb-modal{background:#fcfaf7;border-radius:18px;width:min(1600px,100%);height:98vh;overflow:hidden;box-shadow:0 10px 50px #0005;display:flex;flex-direction:column}.sb-modal header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid #e6dbcc}.sb-modal header small{letter-spacing:1.5px;color:#82796d}.sb-modal h2{font:24px Georgia,serif;margin:4px 0}.sb-close{font-size:28px;border:0;background:none;color:#59452f}.sb-layout{display:flex;flex-direction:column;gap:10px;padding:10px 14px;min-height:0;flex:1;overflow:auto}.sb-main{display:flex;flex-direction:column;gap:10px;min-width:0;flex:none}.sb-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sb-toolbar label{margin:0;font-weight:600}.sb-toolbar select{width:auto;padding:9px;border:1px solid #ded0bd;border-radius:8px;background:#fffaf2}.sb-toolbar button{border:1px solid #ded0bd;border-radius:8px;padding:9px 12px;background:#fffaf2;color:#59452f}.sb-canvas{position:relative;flex:none;height:clamp(560px,72vh,900px);min-height:560px;overflow:hidden;border:1px solid #e6dbcc;border-radius:12px;background:#fff;isolation:isolate}.sb-wardrobe{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;z-index:-1}.sb-help{position:absolute;left:10px;bottom:8px;background:#fffaf2cc;border-radius:5px;padding:5px;font-size:11px;color:#82796d}.sb-piece{position:absolute;z-index:2;border:1px dashed #bba58a;border-radius:8px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;box-shadow:none;cursor:move;padding:4px;box-sizing:border-box}.sb-piece.selected{outline:2px solid #77644f}.sb-piece img{width:100%;height:58%;object-fit:contain;pointer-events:none}.sb-piece input{max-width:100%;width:60px;border:1px solid #ded0bd;border-radius:4px;padding:2px;text-align:center;font-size:11px;background:#ffffffd9}.sb-piece .sb-num{position:absolute;top:3px;left:3px;width:28px;min-width:0;font-weight:bold;padding:1px;border:0;border-radius:3px;background:#ffffffd9;text-align:center}.sb-piece .sb-label{display:none!important}.sb-delete{position:absolute;right:2px;top:2px;border:0;background:#ffffffc9;color:#59452f;border-radius:50%}.sb-resize{position:absolute;right:0;bottom:0;width:15px;height:15px;background:linear-gradient(135deg,transparent 50%,#77644f 50%);cursor:nwse-resize}.sb-assignment{background:#f4ede3;border-radius:10px;padding:8px 12px;max-height:130px;overflow:auto;flex:none}.sb-assignment h3{font:18px Georgia,serif;margin:4px 0}.sb-assignment p{margin:5px 0}.sb-assigned{display:flex;flex-wrap:wrap;gap:8px}.sb-assigned span{background:#fffaf2;border:1px solid #ded0bd;border-radius:7px;padding:5px 8px}.sb-sidebar{background:#f4ede3;border-radius:12px;padding:10px 12px;flex:none}.sb-sidebar[hidden]{display:none}.sb-sidebar label:not(.sb-article){display:block;font-weight:600;margin-bottom:7px}.sb-sidebar input:not([type=checkbox]){width:100%;padding:9px;border:1px solid #ded0bd;border-radius:8px;background:#fffaf2}.sb-sidebar h3{font:18px Georgia,serif;margin:10px 0 6px}.sb-articles{display:grid}.sb-article{display:flex;gap:10px;align-items:center;padding:7px 2px;border-bottom:1px solid #e6dbcc;overflow-wrap:anywhere;cursor:pointer}.sb-article input{accent-color:#59452f;flex:none}.sb-article-photo{width:58px;height:64px;flex:none;object-fit:contain;background:#fff;border:1px solid #e6dbcc;border-radius:6px}.sb-no-photo{display:flex;align-items:center;justify-content:center;font-size:10px;color:#82796d}.sb-empty{color:#82796d}.sb-main .sb-assignment{order:2}.sb-sidebar{order:3}@media(max-width:650px){#storageBoardLaunch{top:auto;bottom:90px}.sb-modal{height:98vh}.sb-layout{gap:7px;padding:7px}.sb-modal h2{font-size:19px}.sb-toolbar{gap:5px}.sb-toolbar button,.sb-toolbar select{font-size:11px;padding:7px}.sb-canvas{height:clamp(480px,66vh,760px);min-height:480px}.sb-piece{max-width:42vw}.sb-help{font-size:9px}.sb-assignment{font-size:12px}}
/* Saved-board presentation: clean fixed PNG pieces, with numbers only. */
.sb-modal{width:min(98vw,1900px);height:99vh}
.sb-canvas{height:clamp(680px,84vh,1200px);min-height:680px}
.sb-wardrobe{object-fit:contain;transform:scale(1.04)}
.sb-piece{border:1px dashed #bba58a;border-radius:8px;background:transparent}
.sb-piece.sb-view-mode{border:0;border-radius:0;padding:0;box-shadow:none;cursor:pointer;outline:none!important}
.sb-piece.sb-view-mode img{width:100%;height:100%;object-fit:contain}
.sb-piece.sb-view-mode .sb-num-display{position:absolute;top:4px;left:50%;transform:translateX(-50%);min-width:22px;padding:2px 4px;border-radius:4px;background:#fffaf2d9;color:#29251f;font-weight:700;text-align:center;font-size:12px;line-height:1.2}
.sb-piece.sb-view-mode .sb-num,.sb-piece.sb-view-mode .sb-delete,.sb-piece.sb-view-mode .sb-resize{display:none!important}
#sb-edit{font-weight:600;background:#59452f;color:#fffaf2}
#sb-add:disabled,#sb-type:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:650px){.sb-canvas{height:clamp(540px,78vh,900px);min-height:540px}.sb-modal{width:100%;height:99vh}.sb-piece.sb-view-mode .sb-num-display{font-size:10px;min-width:18px}}
/* Stable saved dimensions; Rack uses a landscape frame and its PNG scales with it. */
.sb-piece-rack{aspect-ratio:2.1 / 1}
.sb-piece-rack img{width:100%;height:100%;object-fit:contain;flex:none}
.sb-piece:not(.sb-view-mode) img{max-width:100%;max-height:100%;object-fit:contain;flex:1;min-height:0}
.sb-piece.sb-view-mode img{width:100%;height:100%;object-fit:contain;display:block}
.sb-piece.sb-view-mode{overflow:visible}
.sb-sidebar #sb-search{box-sizing:border-box}
/* One number only: editable input while editing, clean number overlay after saving. */
.sb-piece:not(.sb-view-mode) .sb-num-display{display:none!important}
.sb-piece.sb-view-mode .sb-num{display:none!important}
/* Keep the saved board's exact width/height; do not let responsive max-width or aspect ratio override it. */
.sb-piece-rack{aspect-ratio:auto!important}
.sb-piece{max-width:none!important;min-width:0;min-height:0}
.sb-piece.sb-view-mode{width:var(--saved-piece-width,auto)}
.sb-piece.sb-view-mode img{flex:none;object-fit:fill}
@media(max-width:650px){.sb-piece{max-width:none!important}}
.sb-search-result{cursor:default;align-items:center}
.sb-search-result-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.sb-search-result-info strong{font-weight:600}
.sb-search-result-info small{font-size:12px;color:#77644f;overflow-wrap:anywhere}

/* Fit the Storage popup inside the visible screen without changing the wardrobe image styling. */
#storageBoard .sb-shade{padding:8px;box-sizing:border-box;overflow:auto}
#storageBoard .sb-modal{height:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);min-height:0;box-sizing:border-box}
#storageBoard .sb-layout{min-height:0;overflow:auto;overscroll-behavior:contain}
#storageBoard .sb-canvas{height:min(62vh,680px);height:min(62dvh,680px);min-height:280px;max-height:calc(100dvh - 230px);flex:none}
/* Keep the wardrobe image's existing scale and fit; only constrain its surrounding frame. */
#storageBoard .sb-wardrobe{transform:scale(1.04);object-fit:contain}
@media(max-width:650px){
 #storageBoard .sb-shade{padding:6px;align-items:center}
 #storageBoard .sb-modal{width:100%;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);height:auto;border-radius:14px}
 #storageBoard .sb-modal header{padding:7px 10px;flex:none}
 #storageBoard .sb-modal h2{font-size:18px}
 #storageBoard .sb-layout{padding:6px;gap:6px}
 #storageBoard .sb-canvas{height:min(52vh,500px);height:min(52dvh,500px);min-height:240px;max-height:calc(100dvh - 250px)}
 #storageBoard .sb-toolbar{flex-shrink:0}
}

/* Larger wardrobe canvas while keeping the whole popup within the visible viewport. */
#storageBoard .sb-modal{height:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:hidden}
#storageBoard .sb-layout{overflow:auto;min-height:0;flex:1 1 auto}
#storageBoard .sb-canvas{height:min(72vh,760px);height:min(72dvh,760px);min-height:260px;max-height:calc(100dvh - 190px);flex:none}
#storageBoard .sb-wardrobe{inset:0;width:100%;height:100%;object-fit:contain;transform:none!important}
@media(max-width:650px){
 #storageBoard .sb-canvas{height:min(64vh,620px);height:min(64dvh,620px);min-height:240px;max-height:calc(100dvh - 220px)}
 #storageBoard .sb-modal{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}
}

/* Taller wardrobe board; the instruction/assignment area stays below it in the scrollable popup. */
#storageBoard .sb-layout{overflow-y:auto;overflow-x:hidden;min-height:0;flex:1 1 auto;scrollbar-gutter:stable;overscroll-behavior:contain}
#storageBoard .sb-main{flex:none;min-height:max-content}
#storageBoard .sb-canvas{height:82vh;height:82dvh;min-height:520px;max-height:none;flex:none}
#storageBoard .sb-assignment{order:2;flex:none;max-height:none;overflow:visible}
#storageBoard .sb-sidebar{order:3;flex:none}
@media(max-width:650px){
 #storageBoard .sb-canvas{height:76vh;height:76dvh;min-height:460px;max-height:none}
 #storageBoard .sb-layout{overflow-y:auto;overflow-x:hidden}
}


/* Keep each storage piece at its exact saved dimensions after Save Board and when reopening. */
#storageBoard .sb-piece,
#storageBoard .sb-piece.sb-view-mode{
 width:var(--saved-piece-width,130px)!important;
 height:var(--saved-piece-height,100px)!important;
 min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
 flex:none!important;box-sizing:border-box!important;
}
#storageBoard .sb-piece.sb-view-mode img{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:fill!important;flex:none!important}

/* Exact resize interaction: preserve the chosen pixel dimensions in edit and saved view. */
#storageBoard .sb-resize{touch-action:none;pointer-events:auto;z-index:5;width:22px;height:22px}
#storageBoard .sb-piece img{object-fit:fill!important}
#storageBoard .sb-piece.selected{outline:2px solid #77644f}