.media-tabs{display:flex;gap:8px;padding:6px;border:1px solid #203b49;border-radius:12px;margin-bottom:22px;background:#06121b}
.media-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:transparent;color:#a9c2cf;border:1px solid transparent;border-radius:8px;padding:12px;font-size:1rem;cursor:pointer}
.media-tabs button.active{border-color:#11c8f2;color:#e8fbff;background:linear-gradient(135deg,#073953,#0a1e30);box-shadow:inset 0 0 16px #00bcff16}
.generate-button{flex-wrap:wrap;gap:10px!important}.generate-copy{min-width:0}.generate-price{font-size:.92rem;white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto;color:#d5f8ff}
.price-note{line-height:1.55;margin:12px 0 0;font-size:.75rem;color:#8eacbb}.price-note:empty{display:none}
.job-thumbnail{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 112px;width:112px;aspect-ratio:16/9;overflow:hidden;border:1px solid #1a3a48;border-radius:7px;background:#06141d;color:#6e98aa}
.job-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}.thumbnail-badge{position:absolute;bottom:5px;right:5px;font-size:.7rem;color:white;background:#02080dd9;border-radius:4px;padding:2px 5px}
.history-card .job-thumbnail{width:100%;max-width:none;margin:0 0 14px;flex:auto;aspect-ratio:16/9}.history-card{overflow:hidden}.history-card p{overflow-wrap:anywhere}
.image-results{display:grid;gap:12px;width:100%;padding:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}.image-results img{display:block;width:100%;max-height:75vh;object-fit:contain;background:repeating-conic-gradient(#172733 0% 25%,#0d1c26 0% 50%) 0 0/20px 20px;border-radius:6px}
.job-row .job-copy{min-width:0}.job-row .job-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#provider-parameters{display:grid;gap:10px}#provider-parameters>div[hidden]{display:none}
@media(max-width:760px){.job-thumbnail{width:84px;flex-basis:84px}.job-row{gap:10px}.job-row .status{font-size:.66rem;max-width:65px}.generate-price{font-size:.8rem}.generate-button>.icon-slot:last-child{display:none}.generate-copy{font-size:1rem}}

.demo-mode #connection-banner{display:none!important}.demo-entry{display:block;text-align:center;margin-top:14px}.demo-banner{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.demo-banner p{margin:4px 0}.demo-preview{width:100%;height:100%;object-fit:contain}.demo-mode #generate{cursor:not-allowed}.demo-mode #pack-status{display:none!important}
.video-reference-card{min-width:160px}.video-reference-card video{width:100%;aspect-ratio:16/9;object-fit:contain;background:#03090e;border-radius:7px}.mention-option video{width:42px;height:36px;object-fit:cover;border-radius:5px}.token-estimate{font-size:.8rem;padding:12px;border:1px solid #255064;border-radius:8px}.token-estimate p{margin:7px 0}.pack-status{color:#90d9e9;padding:10px;border:1px solid #284b5c;border-radius:8px}#global-pack-budget{margin-bottom:20px}

.demo-banner{gap:24px;align-items:flex-start}.demo-banner>div{max-width:1000px;min-width:0}.demo-banner>div>strong{font-size:1.15rem}.demo-banner p{line-height:1.6;margin:9px 0}.demo-about{margin:12px 0}.demo-about summary{cursor:pointer;color:#90d9e9}.demo-banner>a{flex-shrink:0;white-space:nowrap}@media(max-width:760px){.demo-banner{flex-direction:column;gap:10px}}

/* Image results use their natural proportions instead of the video monitor's 16:9 frame. */
.preview:has(.image-results),.preview:has(>img.demo-preview){aspect-ratio:auto;min-height:0;display:block}
.preview .image-results{padding:0}
.preview .image-results img,.preview>img.demo-preview{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
