/* Match the classic studio shell while retaining compact SPR thumbnails. */
:root{--studio-bg:#111c17;--studio-text:#e0e5d8;--studio-heading:#e2c48b;--studio-border:#546d4544;--preview-bg:#eee}
html,body{background:var(--studio-bg);color:var(--studio-text)}
body>header{padding:24px max(20px,4vw);background:color-mix(in srgb,var(--studio-bg),#6a9560 10%);border-bottom:1px solid var(--studio-border)}
body>header h1{font:28px 'Noto Serif',serif;color:var(--studio-heading);margin:12px 0}
body>header nav a{color:#e3c588}
body>header .muted,main .muted{color:var(--studio-text);opacity:.85}
main{padding:24px max(20px,4vw)}
.filters{align-items:center}
.filters .search-field{display:flex;flex:1;min-width:180px}
.filters input{width:100%;min-width:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.grid{grid-template-columns:repeat(auto-fill,88px);gap:8px;align-items:stretch}
.card{min-width:0;background:color-mix(in srgb,var(--studio-bg),#6a9560 10%);border:1px solid var(--studio-border);border-radius:8px}
.spr-card{padding:0}
.card>button,.card>.spr-thumb{height:72px;min-height:0;padding:4px;display:flex;align-items:center;justify-content:center;background:var(--preview-bg)}
.card button img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;image-rendering:pixelated}
.card strong,.spr-card p{font-size:10px;line-height:1.5;padding:6px;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spr-card p:first-of-type{font-weight:700}
.spr-card p+p{font-size:9px;opacity:.75;padding-top:0;margin-bottom:4px}
.pagination{margin:24px 0}
@media(max-width:550px){body>header,main{padding:20px 16px}.filters select{width:100%}}

#assetSprFrames[hidden],#assetPreview[hidden]{display:none}
#assetSprFrames h3{font-size:14px;margin:16px 0 8px}
.spr-direction{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}
.spr-direction figure{margin:0;padding:8px;border:1px solid #4a5242;border-radius:4px;max-width:100%}
.spr-direction img{width:auto;height:auto;max-width:100%;max-height:300px;margin:0 auto 6px;image-rendering:pixelated;background:repeating-conic-gradient(#26352b 0% 25%,#18231d 0% 50%) 0/12px 12px}
.spr-direction figcaption{text-align:center;font-size:11px}

.spr-stage{height: min(52vh,440px);min-height:220px;display:flex;align-items:center;justify-content:center;overflow:auto;background:#eee;border:1px solid #bbc0b9;margin:14px 0;color:#111}
.spr-stage img{flex:none;width:auto;height:auto;max-width:100%;max-height:100%;margin:0;object-fit:contain;image-rendering:pixelated}
.spr-stage img[hidden]{display:none}
.spr-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0}
.spr-controls button{padding:5px 10px;min-height:32px;font-size:12px}
.spr-controls span{font-size:12px}
.spr-timeline{display:flex;align-items:center;gap:12px;font-size:12px;margin:12px 0}
.spr-timeline span{min-width:100px}
.spr-timeline input{flex:1;width:100%;min-width:0;padding:0;accent-color:#dbbd79}
.spr-jump{display:flex;gap:8px;align-items:center;font-size:12px}
.spr-jump input{flex:none;min-width:0;width:85px;min-height:32px;padding:4px 6px}

.background-settings{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:16px 0}
.background-settings label{display:flex;align-items:center;gap:8px;font-size:13px}
.background-settings input[type=color]{flex:none;min-width:0;width:40px;height:32px;min-height:32px;padding:2px;cursor:pointer}
.background-settings button{min-height:32px;padding:5px 12px;font-size:12px}
.card>button,.card>.spr-thumb,.spr-stage,#assetPreview{background:var(--preview-bg)}
#assetDialog .muted{color:#ffebbd}

/* Approved exports include the image and the metadata needed to use it. */
.asset-downloads{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px}
.asset-downloads[hidden]{display:none}
.asset-downloads a{font-size:12px;padding:0}
.asset-downloads button{font-size:12px;min-height:32px;padding:5px 8px;overflow-wrap:anywhere;max-width:100%}

#assetDownloads>section{width:100%;min-width:0}
#assetDownloads h3{font-size:14px;margin:4px 0 12px}
#assetDownloads img{background:var(--preview-bg);image-rendering:pixelated}

#assetDialog[open].has-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;width:min(95vw,1400px)}
#assetDialog.has-sheet>header,#assetDialog.has-sheet>#assetFrameInfo{grid-column:1/-1}
#assetDialog.has-sheet>#assetSprFrames{grid-column:1;grid-row:2;min-width:0}
#assetDialog.has-sheet>#assetDownloads{grid-column:2;grid-row:2;align-content:start;align-items:start;min-width:0;border-left:1px solid #546d45;padding:14px 0 14px 20px}
#assetDownloads img{width:auto;height:auto;max-width:100%;max-height:52vh;object-fit:contain}
@media(max-width:700px){
 #assetDialog[open].has-sheet{grid-template-columns:minmax(0,1fr)}
 #assetDialog.has-sheet>#assetDownloads{grid-column:1;grid-row:3;border-left:0;border-top:1px solid #546d45;padding:14px 0}
}

.webp-status{display:block;margin:2px 5px 6px;padding:3px 4px;border:1px solid currentColor;border-radius:4px;font-size:9px;line-height:1.4;text-align:center;background:var(--studio-bg)}
.webp-status.ready{color:#47985c}.webp-status.missing{color:#bd852c}