[data-page=gallery] main { width:calc(100% - 40px); max-width:none; }
.gallery-account { margin:0 0 12px; }
.gallery-account input { max-width:420px; }
.history-head { margin:20px 0; }
.history-head > div { display:grid; gap:4px; }
.history-head .hint { margin:0; }
.catalog-toggle > span:last-child { min-height:44px; display:flex; gap:9px; align-items:center; }
.catalog-toggle input { inline-size:18px; block-size:18px; }
.asset-type-controls { display:flex; flex-wrap:wrap; gap:16px; align-items:end; padding:16px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-3); }
.asset-type-controls label { min-width:min(320px,100%); }
.asset-type-controls .catalog-toggle { min-width:auto; }
.advanced-filters { margin-top:14px; padding:0; border:1px solid var(--border); border-radius:var(--radius-3); background:var(--bg-raised); }
.advanced-filters > summary { padding:14px 16px; color:var(--text); font-weight:700; cursor:pointer; }
.advanced-filters[open] > summary { border-bottom:1px solid var(--border); }
.bin-actions { display:flex; gap:16px; align-items:center; justify-content:space-between; margin:16px 0; padding:14px; border:1px solid var(--border); border-radius:var(--radius-3); background:var(--bg-raised); }
.bin-actions .hint { margin:0; }
.history-filters { padding:16px; }
.history-pagination { margin:20px 0; }
.history { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.job { display:flex; flex-direction:column; padding:0; background:var(--bg-raised); }
.job { position:relative; }
.job.is-selected { outline:2px solid var(--accent); outline-offset:2px; }
.job-selector { position:absolute; z-index:2; top:8px; right:8px; display:flex; gap:6px; align-items:center; padding:6px 8px; border-radius:999px; background:color-mix(in srgb,var(--bg-sunk) 88%,transparent); cursor:pointer; }
.job-selector input { inline-size:18px; block-size:18px; accent-color:var(--accent); }
.project-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:16px 0; padding:14px; border:1px solid var(--border); border-radius:var(--radius-3); background:var(--bg-raised); }
.project-actions label { min-width:220px; }
.project-actions .hint { flex-basis:100%; }
.project-badge { display:inline-block; max-width:100%; margin:4px 0 8px; padding:3px 8px; border:1px solid var(--border); border-radius:999px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.job-prompt { display:grid; gap:4px; max-height:8.5em; overflow:auto; padding:8px; border-left:2px solid var(--accent); background:var(--bg-sunk); white-space:pre-wrap; overflow-wrap:anywhere; }
.job-preview { width:100%; height:220px; margin:0; padding:0; border:0; background:transparent; cursor:zoom-in; }
.job-preview img { height:220px; }
.video-card { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; background:var(--bg-sunk); color:var(--text); }
.video-card > .video-play-badge { font-size:42px; color:var(--accent); }
.job--video .job-main strong { overflow-wrap:anywhere; }
#viewerVideo { width:100%; max-height:100%; object-fit:contain; }
[hidden] { display:none !important; }
.job-main { padding:12px; }
.job-main strong { font-size:var(--size-4); }
.job-main small { color:var(--text-dim); }
.job-error { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); overflow-wrap:anywhere; }
.job-error strong { font-size:inherit; }
.job-error p { margin:8px 0 0; }
.job-actions { padding:0 12px 12px; margin-top:auto; }
.image-viewer { inset:12px; width:calc(100vw - 24px); height:calc(100dvh - 24px); max-width:none; max-height:none; padding:16px; box-sizing:border-box; background:var(--bg-sunk); color:var(--text); }
.image-viewer[open] { display:flex; flex-direction:column; gap:12px; }
.viewer-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px); gap:16px; flex:1; min-height:0; }
.viewer-stage { position:relative; display:flex; min-width:0; min-height:0; align-items:center; justify-content:center; background:var(--bg-raised); }
.image-viewer img { width:100%; height:100%; min-height:0; object-fit:contain; }
.viewer-arrow { position:absolute; z-index:2; top:50%; translate:0 -50%; width:48px; height:64px; border:1px solid var(--border); border-radius:var(--radius-3); background:color-mix(in srgb,var(--bg-sunk) 82%,transparent); color:var(--text); font-size:28px; cursor:pointer; }
.viewer-arrow:disabled { opacity:.25; cursor:default; }.viewer-arrow--previous { left:12px; }.viewer-arrow--next { right:12px; }
.viewer-details { overflow:auto; padding:18px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius-3); }
.viewer-details dl { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; }.viewer-details dt { color:var(--text-dim); }.viewer-details dd { margin:0; overflow-wrap:anywhere; }
.viewer-details p { white-space:pre-wrap; overflow-wrap:anywhere; }
.image-viewer::backdrop { background:color-mix(in srgb,var(--bg-sunk) 90%,transparent); }
.viewer-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; }
@media(max-width:600px) {
 [data-page=gallery] main { width:calc(100% - 24px); }
 .history { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .job-preview,.job-preview img { height:170px; }
 .job-main small { display:none; }
 .job-actions .wg-button { padding:8px; }
 .viewer-layout { grid-template-columns:1fr; grid-template-rows:minmax(45vh,1fr) auto; }
}

/* First-frame previews keep the full composition visible; the play affordance stays legible. */
.video-card{position:relative;overflow:hidden}
.video-card img{width:100%;object-fit:contain}
.video-card .video-play-badge{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#101610e6;color:var(--accent);font-size:22px;pointer-events:none}