.artwork-replace-button{background:#eee9dc;color:#253027;margin:8px 8px 0 0;padding:7px 14px;min-height:36px;font-size:12px}
dialog.artwork-replacement{width:min(1050px,96vw);height:min(860px,94dvh);max-width:96vw;max-height:94dvh;padding:22px;margin:auto;border:1px solid #c8c5ba;background:#f2efe7;color:#28312a;overflow:hidden;gap:0}
dialog.artwork-replacement[open]{display:flex;flex-direction:column;align-items:stretch}
.artwork-replacement::backdrop{background:#101510b8}
.artwork-replacement button{color:#28312a;background:#e6e2d7;border-color:#babbae;min-height:44px}
.artwork-replacement button:hover{background:#dbd9cd}.artwork-replacement button:focus-visible,.artwork-replacement input:focus-visible,.artwork-replacement select:focus-visible{outline:2px solid #324a37;outline-offset:2px}
.replacement-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.replacement-head h2{font:500 23px/1.3 serif;margin:0}.replacement-head button{font-size:23px;min-width:44px;padding:4px 10px}
.replacement-target{font-size:12px;line-height:1.5;margin:8px 0 15px;color:#555d51}
.replacement-filters{display:flex;gap:12px;align-items:center;padding:0 0 15px;border-bottom:1px solid #c7c8bd;font-size:13px}.replacement-filters select,.replacement-filters input{min-height:40px;background:#fffef9;border:1px solid #abafa2;color:#28312a;padding:8px;font:inherit}.replacement-filters input{flex:1;min-width:80px}
.replacement-list{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;align-content:start;padding:18px 3px}
.artwork-replacement .replacement-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:9px;gap:6px;background:transparent;border:1px solid #c7c8bd;min-width:0;white-space:normal;border-radius:0}
.artwork-replacement .replacement-card[aria-pressed=true]{border:2px solid #334f3b;padding:8px;background:#e5e8dc}.artwork-replacement .replacement-card:disabled{cursor:default;opacity:1}
.replacement-photos{height:150px;display:flex;align-items:center;justify-content:center;gap:2px;background:#e7e3d9;overflow:hidden}.replacement-photos img{flex:1;min-width:0;width:100%;height:100%;object-fit:contain}.replacement-card.used img{filter:grayscale(1);opacity:.7}
.replacement-card strong{font-size:13px;font-weight:500;line-height:1.5}.replacement-card>span:not(.replacement-photos){font-size:11px;line-height:1.5;color:#535b50}.replacement-card small{font-size:10px;line-height:1.6;color:#555d52;overflow-wrap:anywhere}
.replacement-foot{display:flex;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid #c7c8bd;padding-top:13px}.replacement-foot p{font:12px/1.6 sans-serif;max-width:70%;margin:0}.artwork-replacement .replacement-apply{background:#304537;color:#fff;border-color:#304537;font-size:13px;white-space:nowrap}.artwork-replacement .replacement-apply:disabled{background:#d0d1c6;color:#676c61;cursor:default}
@media(max-width:600px){dialog.artwork-replacement{padding:14px}.replacement-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.replacement-photos{height:130px}.replacement-filters{gap:8px}.replacement-filters label{white-space:nowrap}.replacement-foot{align-items:stretch;flex-direction:column;gap:8px}.replacement-foot p{max-width:none}.replacement-head h2{font-size:20px}}
@media(max-height:500px){dialog.artwork-replacement{padding:12px 18px}.replacement-target{margin:4px 0 8px}.replacement-filters{padding-bottom:8px}.replacement-head h2{font-size:18px}.replacement-head button{min-height:32px}.replacement-list{padding:10px 3px;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.replacement-photos{height:95px}.replacement-foot{padding-top:8px}.replacement-foot button{min-height:36px}}
.artwork-replacement,.artwork-replacement *{box-sizing:border-box}
.replacement-list{grid-auto-rows:minmax(270px,auto)}
.artwork-replacement .replacement-card{min-height:270px;height:100%}
.replacement-photos{flex:0 0 150px}
.replacement-card>strong,.replacement-card>span:not(.replacement-photos),.replacement-card>small{flex-shrink:0}
@media(max-width:600px){.replacement-photos{flex-basis:130px}.replacement-list{grid-auto-rows:minmax(250px,auto)}.artwork-replacement .replacement-card{min-height:250px}}
@media(max-height:500px){.replacement-photos{flex-basis:95px}.replacement-list{grid-auto-rows:minmax(200px,auto)}.artwork-replacement .replacement-card{min-height:200px}}