/* Viewer styles live under lib/ so both staging sync and the live viewer copy include them. */
:root{--text-dim:#b6a1cb;--viewer-center-x:50%;--dyeCell:24px}
button{font-family:var(--font-body)}
.pmCollapse{font:inherit;color:inherit;border:0;background:transparent;padding:0;text-align:left;display:flex;align-items:center;gap:6px;cursor:pointer}
.pmGi .nm,.pmAcc .strip .si .nm{display:block}
.pmHd h4,.pmHd .cnt,.pmSeg button{font-size:max(.65rem,11px)}
.pmcl1 .rail{width:5.5rem}
.pmcl1 .rail button{font-size:max(.65rem,11px);line-height:1.3;min-height:52px}
.pmGi,.pmAcc .strip .si{padding:0;background:none;border:0;color:var(--text);text-align:center;font:inherit}
.pmGi .nm,.pmAcc .strip .si .nm{font-size:max(.72rem,12px);line-height:1.35;overflow-wrap:anywhere}
.pmGi .pmThumb{height:4.75rem}.pmThumb img{padding:4px;object-position:center}
.pmAcc .strip .si{width:6.3rem}.pmAcc .strip .si .pmThumb{height:4.75rem}
.pmAcc>.ah{width:100%;border:0;background:transparent;text-align:left;font-size:max(.75rem,12px)}
.pmAcc>.ah .ac{font-size:11px}.pmAcc .ah .chev{margin-left:3px}
.pmGi[aria-busy="true"] .pmThumb{border-color:var(--gold)}
.pmGi[aria-busy="true"] .nm::after,.si[aria-busy="true"] .nm::after{content:' · Loading';color:var(--gold)}
.pmEmpty{font-size:max(.75rem,12px)}
.pmWc{padding:7px 38px 7px 7px;flex-wrap:wrap}
.pmWearSelect{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:0;border:0;background:none;color:var(--text);text-align:left;cursor:pointer}
.pmWearSelect .info{min-width:0}.pmWc .info b{font-size:max(.78rem,12px);white-space:normal;line-height:1.35}
.pmWc .info .cat,.pmWc .info .note{font-size:11px}.pmWc .info .cat{font-family:var(--font-body);letter-spacing:0;text-transform:none}
.pmWc .rm,.pmWc .foc{border:0;background:transparent;width:28px;height:28px;font-size:13px;opacity:1;padding:2px}
.pmWc .foc{bottom:2px}.pmWc .rm{top:2px}.pmWearTags{flex-basis:100%;padding-left:4px}
.pmDyeProgress{padding:5px 11px;color:var(--gold);font-size:12px;flex-shrink:0;border-bottom:1px solid var(--border)}
.pmItemTag{font-size:12px;gap:8px;line-height:1.4;flex-wrap:wrap}.pmItemTag>span{flex:1;min-width:100px}
.pmSt{text-align:left;color:var(--text);min-height:47px}.pmSt .t{min-width:0}
.pmSt .t b,.pmSrow .sh .meta b{font-family:var(--font-body);font-size:12px;letter-spacing:0;text-transform:none}
.pmSt .t span,.pmSrow .sh .meta span{font-size:11px;overflow-wrap:anywhere;line-height:1.35;display:block}
.pmSrow .sh{width:100%;border:0;background:transparent;text-align:left;color:var(--text)}
.pmSrow .sh .big{width:25px;height:25px}.pmSrow .tray{max-height:14rem}
.pmGrid .px,.pmSrow .tray .px,.pmAppGrid .px{padding:0;min-width:0;min-height:0}
.pmGrid .px:focus-visible,.pmSrow .tray .px:focus-visible,.pmAppGrid .px:focus-visible{outline:2px solid var(--gold);outline-offset:1px;z-index:4}
.pmGrid .px:hover,.pmSrow .tray .px:hover{transform:none}
.pmCoord{display:block;width:100%;text-align:left;background:var(--panel2);border:0;border-top:1px solid var(--border);font-size:12px;color:var(--text);min-height:38px;line-height:1.4;cursor:pointer;overflow-wrap:anywhere}
.pmCoord:disabled{color:var(--text-dim);cursor:default;opacity:1}
.pmHoverCoord{font-size:11px;color:var(--text-dim);padding:3px 11px 7px;min-height:27px;flex-shrink:0}
.pmRecent[hidden]{display:none}.pmRecent .px{width:24px;height:24px;min-width:24px;padding:0}
.pmRecent .rl,.pmRecent .rclr,.pmAllBtn{font-size:11px}.pmAllBtn{min-height:28px}
.pmAppGrid{grid-template-columns:repeat(auto-fill,minmax(24px,1fr))}
.pmAppSec h5 .rst{border:0;background:transparent;font-size:11px;color:var(--accent);min-height:28px}
.pmCi .nm{font-size:max(.78rem,12px)}.pmCi .slot,.pmCi .cols .c{font-size:11px}
.pmNeedsDye{display:inline-block;margin-top:5px;background:var(--panel2);border:1px solid var(--border-bright);border-radius:5px;color:var(--gold);font-size:11px;padding:4px 7px;cursor:pointer}
.pmExplore{display:block;margin:7px 8px 0;width:calc(100% - 16px);border:1px solid var(--border-bright);border-radius:7px;background:var(--accent-dim);color:var(--text);padding:7px 9px;font-size:12px;text-align:left;cursor:pointer;flex-shrink:0}
#viewControls{left:var(--viewer-center-x);bottom:16px;display:flex;flex-wrap:nowrap;gap:6px;max-width:calc(100% - 24px);z-index:12}
#viewControls>button{min-height:42px;font:12px var(--font-body);padding:7px 12px;white-space:nowrap}
#viewMorePanel{position:absolute;left:var(--viewer-center-x);transform:translateX(-50%);bottom:68px;z-index:43;width:min(330px,calc(100% - 24px));max-height:calc(100% - 132px);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;padding:10px;background:var(--panel);border:1px solid var(--border-bright);border-radius:10px;box-shadow:0 14px 32px #0009;display:grid;grid-template-columns:1fr 1fr;gap:7px}
#viewMorePanel[hidden]{display:none}
#viewMorePanel button,#viewMorePanel select{min-height:40px;padding:7px;border:1px solid var(--border);border-radius:7px;background:var(--panel2);color:var(--text);font:12px var(--font-body);cursor:pointer}
#viewMorePanel button:disabled{opacity:.45;cursor:default}
#viewMorePanel .qualityChoice{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim)}
#viewMorePanel select{flex:1;min-width:0}
#scenePop{left:var(--viewer-center-x);bottom:72px}
#itemSearchResults .res{display:flex;width:100%;align-items:center;text-align:left;font-family:var(--font-body);border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--panel);color:var(--text);cursor:pointer}
#itemSearchResults .searchHeading{font-size:11px;color:var(--gold);padding:6px 10px;background:var(--panel2)}
#itemSearchResults .res.kbd{background:var(--panel2)}
#pmTabs button{height:54px;width:72px;flex-direction:column;gap:3px;font:10px var(--font-body)}
#pmTabs button .tabIcon{display:flex;align-items:center;justify-content:center;height:21px}#pmTabs button .tabIcon svg{width:20px;height:20px}
#pmTabs .tabLabel{display:block;line-height:1.1}
#helpBtn{width:36px;height:36px}#helpPop p{font-size:12px}
#loadStatus{position:absolute;left:50%;top:65px;transform:translateX(-50%);z-index:16;background:var(--panel);border:1px solid var(--border-bright);border-radius:8px;padding:8px 12px;max-width:calc(100% - 24px);font-size:12px;box-shadow:0 8px 20px #0007}
#loadStatus[hidden]{display:none}#loadStatus button{margin-left:10px;border:0;border-radius:4px;background:var(--accent-dim);color:var(--text);padding:5px 8px;cursor:pointer}
#draftBanner{position:absolute;left:50%;top:65px;transform:translateX(-50%);width:min(440px,calc(100% - 24px));z-index:17;padding:11px 13px;border:1px solid var(--border-bright);border-radius:9px;background:var(--panel);box-shadow:0 8px 25px #0009;font-size:12px}
#draftBanner p{margin:0 0 8px;line-height:1.5}#draftBanner button{padding:7px 10px;margin-right:6px;border:1px solid var(--border-bright);background:var(--panel2);border-radius:6px;color:var(--text);cursor:pointer;font-size:12px}
#draftBanner button:first-of-type{background:var(--accent-dim)}
#orderModal,#schemModal{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--text);background:#080611b8}
#orderModal::backdrop,#schemModal::backdrop{background:#08061188}
#orderModal:not([open]),#schemModal:not([open]){display:none}
#omClose,#schemClose{background:transparent;border:0;color:var(--text-dim);width:36px;height:36px;cursor:pointer;font-size:18px}
#orderCard .omLab{font-size:12px}#orderCard input,#orderCard textarea{font-size:14px}#orderCard .omSub{font-size:13px}
#orderModal .needPick{background:var(--panel2);border:1px solid var(--border-bright);border-radius:5px;padding:5px 7px;cursor:pointer;color:var(--gold)}
#presetModal{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--text);background:#080611b8}
#presetModal::backdrop{background:#08061188}#presetModal:not([open]){display:none}
#psClose{background:transparent;border:0;color:var(--text-dim);width:36px;height:36px;cursor:pointer;font-size:18px}
.psCardItem{font-family:var(--font-body);text-align:left;color:var(--text);padding:0}
@media(max-width:1100px){body.railTabs #railR{right:88px}body.railTabs #pmTabs{right:8px}}
@media(max-width:768px){
 body.mobileSheet #pmTabs{gap:4px;bottom:8px}body.mobileSheet #pmTabs button{flex:1;min-width:0;width:auto;height:54px;font-size:10px;border-radius:8px}
 body.mobileSheet #railL,body.mobileSheet #railR{bottom:130px;max-height:48vh}
 body.mobileSheet.panelMode .pmPanel.tabOpen{max-height:48vh}
 body.mobileSheet #viewControls{bottom:72px;left:50%;width:calc(100% - 20px);justify-content:center}
 body.mobileSheet #viewControls>button{min-height:44px;padding:6px 8px;font-size:12px}
 body.mobileSheet #orderBtn{flex:1}body.mobileSheet #orderBtn .tsi{display:none}
 body.mobileSheet #viewMorePanel{left:50%;bottom:124px;max-height:calc(100% - 184px)}
 body.mobileSheet #scenePop{left:50%;bottom:124px}
 body.mobileSheet #helpBtn{display:block;left:auto;right:8px;top:10px;width:34px;height:34px}
 body.mobileSheet #helpPop{left:auto;right:8px;top:52px}
 body.mobileSheet #itemSearch{left:10px;transform:none;width:calc(100% - 62px)}
 body.mobileSheet #toast{bottom:124px;font-size:12px}
 .pmSlotTabs{padding:6px;gap:5px;max-height:105px}.pmMatrix{padding:7px;min-height:75px}
 .pmItemTag{padding:5px 8px;font-size:11px}.pmDyeProgress{font-size:11px;padding:3px 8px}
 .pmHoverCoord{font-size:10px;padding:2px 8px 4px;min-height:20px}.pmCoord{font-size:11px;padding:5px 8px;min-height:31px}
 .pmSt{padding:4px 6px;min-height:42px}.pmRecent{padding:4px 8px}.pmRecent .px{width:24px;height:24px}
 #draftBanner{top:55px}#loadStatus{top:55px}
}
@media(prefers-reduced-motion:reduce){.pmGrid .px.sel,.pmSrow .tray .px.sel{animation:none}}