.media-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.media-preview-grid[hidden] { display: none !important; }
.media-preview { min-width: 0; padding: 12px; border: 1px solid #dbe7e9; border-radius: 12px; background: #f8fbfb; }
.media-preview h3 { margin: 0 0 9px; color: var(--navy); font-size: 12px; }
.media-image-frame { position: relative; display: grid; min-height: 190px; place-items: center; overflow: hidden; border: 1px solid #dfeaec; border-radius: 9px; background: repeating-conic-gradient(#edf3f3 0 25%, #fff 0 50%) 50% / 18px 18px; }
.media-image-frame img { display: block; width: 100%; max-height: 300px; object-fit: contain; }
.media-image-frame img[hidden] { display: none !important; }
.media-image-placeholder { display: grid; place-items: center; gap: 9px; padding: 26px 15px; color: #81939c; font-size: 11px; font-weight: 700; text-align: center; }
.media-placeholder-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #c8dfe0; border-radius: 12px; background: rgba(255,255,255,.76); color: var(--teal); font-size: 20px; }
.media-image-frame:not(.is-empty) .media-image-placeholder { display: none; }
.media-image-frame.is-error .media-image-placeholder { display: grid; color: #9c6d6d; }
.media-image-frame.is-error .media-placeholder-icon { border-color: #e5caca; color: #ad6868; }
.media-progress { height: 9px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: #e7eff1; }
.media-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--teal); transition: width 160ms ease; }
.media-progress[hidden], .media-preview[hidden] { display: none; }
.media-format-note { margin-top: 16px; padding: 12px 14px; border-left: 3px solid #73aaa7; border-radius: 7px; background: #f2faf8; color: #58717e; font-size: 12px; line-height: 1.55; }
.media-faq { margin-top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.media-faq h2 { margin: 0 0 15px; color: var(--navy); font-size: 20px; }
.media-faq details { padding: 13px 0; border-top: 1px solid #e4ecef; }
.media-faq details:first-of-type { border-top: 0; }
.media-faq summary { color: var(--navy); cursor: pointer; font-size: 13px; font-weight: 750; }
.media-faq details p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.model-status { margin-top: 15px; padding: 12px 14px; border-radius: 8px; background: #f5f8fa; color: var(--muted); font-size: 12px; line-height: 1.5; }
.model-status strong { color: var(--teal-dark); }
.model-result-info { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.55; }
@media (max-width: 700px) {
    .media-preview-grid { grid-template-columns: 1fr; }
    .media-faq { padding: 20px 17px; }
}