@layer global-ui{
#modal:has(.bag-inventory-ui),#modal:has(.bag-shop-ui){width:min(1120px,96vw)!important;max-width:96vw!important;max-height:95dvh!important;padding:12px!important;background:#e8d2ec!important;border:0!important}
#modalContent .bag-inventory-ui,#modalContent .bag-shop-ui{box-sizing:border-box;background:#eee1f1!important;border:28px solid transparent!important;border-image:url('assets/bag-ui-v1/frame.webp') 130 stretch!important;border-radius:0!important;padding:10px!important;box-shadow:none!important;min-width:0}
#modalContent .bag-inventory-ui h2{min-height:0!important;margin:0 32px 10px!important;padding:4px!important;border:0!important;background:none!important;font-size:21px!important;display:block!important}
.bag-ui-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:20px;align-items:start}
.bag-ui-pocket{min-width:0;padding:8px;background:#dcc5e4;border-radius:15px}
#modalContent .bag-inventory-ui #bagGrid{width:100%;box-sizing:border-box;margin:0!important;border:3px solid #b18aba!important;padding:5px!important;outline:0!important;background:#ead9ee!important;max-height:none}
.bag-ui-actions{max-height:65dvh;overflow:auto;min-width:0;padding:0 6px 6px}
.bag-ui-actions>p{margin:0 0 9px;padding:9px;background:#fff8ef;color:#61485f;border-radius:8px;font-size:13px;line-height:1.6}
.bag-ui-actions .adventure-options{display:flex;flex-wrap:wrap;gap:6px;padding:0!important;background:none!important;border:0!important}
.bag-ui-actions button,.bag-shop-ui button{box-sizing:border-box;min-height:44px!important;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;padding:7px 13px!important;border:10px solid transparent!important;border-image:url('assets/bag-ui-v1/button-normal.webp') 35 150 fill stretch!important;background:#e5d0ed!important;border-radius:0!important;color:#604b67!important;box-shadow:none!important;font-size:14px!important;line-height:1.35}
.bag-ui-actions button:hover,.bag-shop-ui button:hover,.bag-ui-actions button[aria-pressed=true]{border-image-source:url('assets/bag-ui-v1/button-selected.webp')!important;background:#d5eadf!important}
.bag-ui-actions button:active,.bag-shop-ui button:active{border-image-source:url('assets/bag-ui-v1/button-pressed.webp')!important;background:#ccb0da!important}
.bag-ui-actions button:disabled,.bag-shop-ui button:disabled{border-image-source:url('assets/bag-ui-v1/button-disabled.webp')!important;background:#dfd8e1!important;opacity:1!important;color:#8e8091!important}
.bag-ui-actions .bag-colors button{width:36px;min-height:36px!important;border:3px solid white!important;border-image:none!important;padding:0!important;border-radius:50%!important}
.bag-shop-ui .shopfront-head{padding:0 0 12px!important;background:none!important;gap:12px;flex-wrap:wrap}
.bag-shop-ui .shopfront-head h2{font-size:22px!important}.bag-shop-ui .shopfront-body{grid-template-columns:minmax(200px,30%) minmax(0,1fr)!important;gap:16px;background:none!important}
.bag-shop-ui aside{background:#ead8ef!important;border:0!important;padding:10px!important}.bag-shop-ui aside h3{text-align:center;font-size:16px}
.bag-shop-ui #bagSidesPreview{width:100%!important;max-width:none!important;background:none!important;border:0!important;border-radius:0!important}
.bag-shop-ui .shop-stock{min-width:0;padding:0!important}.bag-shop-ui .shop-search{background:none!important;padding:0 0 10px!important}
.bag-shop-ui .gear-card{background:#fff6ec!important;border:1px solid #cbb0d1!important;border-radius:12px!important;padding:12px!important;gap:10px;margin:0 0 10px!important;box-shadow:none!important}
.bag-shop-ui .gear-card strong{min-width:90px}.bag-shop-ui #shopExit{margin-left:auto}
@media(max-height:500px) and (min-width:601px){#modal:has(.bag-inventory-ui),#modal:has(.bag-shop-ui){padding:6px!important}#modalContent .bag-inventory-ui,#modalContent .bag-shop-ui{border-width:17px!important;padding:3px!important}.bag-ui-layout{grid-template-columns:minmax(0,1.45fr) minmax(230px,1fr);gap:12px}.bag-ui-actions{max-height:61dvh}.bag-ui-pocket{max-width:calc((100dvh - 118px)*1.5);justify-self:center;width:100%;padding:3px}#modalContent .bag-inventory-ui h2{font-size:16px!important;margin-bottom:5px!important}.bag-shop-ui .shopfront-head h2{font-size:18px!important}.bag-shop-ui .shopfront-head{padding-bottom:5px!important}.bag-shop-ui .shop-stock{max-height:63dvh}.bag-shop-ui .shopfront-body{grid-template-columns:200px minmax(0,1fr)!important}}
@media(max-width:600px){.bag-ui-layout{grid-template-columns:minmax(0,1fr)}.bag-ui-actions{max-height:none}.bag-shop-ui .shopfront-body{grid-template-columns:minmax(0,1fr)!important}.bag-shop-ui aside{max-width:260px;margin:auto}}
}

@layer global-ui{
html body #modal:has(.bag-inventory-ui),html body #modal:has(.bag-shop-ui){padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
html body #modalContent:has(.bag-inventory-ui),html body #modalContent:has(.bag-shop-ui){padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
html body #modalContent .bag-ui-actions button:not([data-bag-color]),html body #modalContent .bag-shop-ui button{background:transparent!important;border-color:transparent!important}
html body #modalContent .bag-inventory-ui h2{box-shadow:none!important;border-radius:0!important}
html body #modalContent .bag-inventory-ui #bagDetail:empty{display:none}
html body #modal:has(.bag-inventory-ui)>#closeModal{top:22px!important;right:24px!important;min-height:36px!important;width:36px!important}
@media(max-height:500px) and (min-width:601px){html body #modalContent .bag-inventory-ui{border-width:17px!important;padding:3px!important}.bag-ui-actions{max-height:calc(95dvh - 80px)}.bag-ui-pocket{max-width:calc((95dvh - 83px)*1.5)}html body #modalContent .bag-inventory-ui h2{margin:0 38px 6px!important}}
}
@layer global-ui{
html body #modalContent .bag-shop-ui{height:min(820px,95dvh)!important;max-height:95dvh!important;display:flex!important;flex-direction:column!important;box-sizing:border-box!important}
html body #modalContent .bag-shop-ui .shopfront-head{flex:0 0 auto!important}
html body #modalContent .bag-shop-ui .shopfront-body{flex:1 1 auto!important;min-height:0!important;overflow:visible!important}
html body #modalContent .bag-shop-ui .shop-stock{height:100%!important;max-height:none!important;overflow:auto!important;box-sizing:border-box}
html body #modalContent .bag-shop-ui aside{min-height:0!important;overflow:auto!important}
}

@layer global-ui{html body #toast.bag-ui-toast{border:14px solid transparent!important;border-image:url('assets/bag-ui-v1/button-normal.webp') 35 150 fill stretch!important;background:transparent!important;padding:10px 18px!important;color:#604b67!important;box-shadow:none!important;max-width:min(620px,88vw)!important;box-sizing:border-box;white-space:normal;line-height:1.5;pointer-events:none}}
