.media-page{background:radial-gradient(ellipse at 50% 0%,#fff3f1 0%,#fff 52%)}
.media-hero{padding:58px 20px 34px;text-align:center}
.media-hero h1{margin-bottom:16px}
.media-hero .hero-copy{max-width:660px}
.media-card{width:min(100%,760px);margin:30px auto 0;background:#fff;border:1px solid #ececf0;border-radius:19px;box-shadow:var(--shadow);text-align:left;overflow:hidden}
.media-dropzone{margin:17px;border:1.5px dashed #dedfe6;border-radius:13px;min-height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:28px 18px;background:#fdfdfd;transition:.2s}
.media-dropzone.dragover,.media-dropzone:hover{border-color:var(--coral);background:#fff8f7}
.media-dropzone h2,.media-workspace h2,.media-results h2{font:800 21px Manrope,sans-serif;letter-spacing:-.5px;margin:0 0 7px;text-align:center}
.media-dropzone p{color:var(--muted);font-size:13px;margin:0 0 18px;text-align:center}
.media-dropzone .file-note{margin-top:17px;text-align:center}
.media-input{display:none}
.media-workspace,.media-results{padding:25px 27px 22px}
.media-file-list,.media-result-list{display:flex;flex-direction:column;gap:9px;max-height:260px;overflow:auto;margin:18px 0}
.media-file-row,.media-result-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #eeeef2;border-radius:10px;min-width:0}
.media-file-icon{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:#fff0ef;color:var(--coral);font-size:10px;font-weight:800;text-transform:uppercase}
.media-file-info{min-width:0;flex:1}
.media-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}
.media-file-size{font-size:11px;color:#9296a0;margin-top:4px}
.media-remove{border:0;background:#f8f8fa;color:#858995;border-radius:7px;width:29px;height:29px;font-size:17px;cursor:pointer}
.media-status{min-height:20px;margin:14px 0 0;text-align:center;font-size:12px;line-height:1.6;color:#737783}
.media-card>.media-status{padding:0 20px 15px}
.media-status[data-state="error"]{color:#bd302b}
.media-progress{width:100%;height:7px;margin:10px 0 0;accent-color:var(--coral)}
.media-progress[hidden]{display:none}
.media-results{padding-top:20px}
.media-results h2{font-size:23px}
.media-results h2:focus{outline:2px solid var(--coral);outline-offset:5px;border-radius:2px}
.media-result-info{min-width:0;flex:1}
.media-download{font-size:11px;color:var(--coral);font-weight:800;white-space:nowrap}
.media-note{max-width:730px;margin:18px auto 0;padding:14px 16px;border:1px solid #f3e2c6;background:#fffaf1;border-radius:10px;color:#73644d;font-size:11px;line-height:1.65}
.media-copy{max-width:850px;margin:0 auto;padding:18px 24px 72px}
.media-copy section{padding:23px 0;border-top:1px solid #eeeef2}
.media-copy section:first-child{border-top:0}
.media-copy h2{font:800 22px Manrope,sans-serif;letter-spacing:-.5px;margin:0 0 12px}
.media-copy p,.media-copy li{font-size:14px;line-height:1.85;color:#656a75}
.media-copy ol,.media-copy ul{padding-left:22px}
.media-faq details{padding:14px 0;border-bottom:1px solid #eeeef2}
.media-faq summary{font-size:14px;font-weight:700;cursor:pointer}
.media-faq details p{margin:9px 0 0}
.media-directory{max-width:1050px;margin:0 auto;padding:24px 24px 72px}
.media-directory-intro{max-width:650px;margin:0 auto 32px;text-align:center;color:var(--muted);font-size:14px;line-height:1.8}
.media-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.media-tool-link{display:flex;min-height:105px;flex-direction:column;justify-content:space-between;padding:18px;border:1px solid #eeeef2;border-radius:13px;background:#fff;transition:.2s}
.media-tool-link:hover{border-color:#f4b9b5;background:#fff8f7;transform:translateY(-2px)}
.media-tool-link strong{font:800 14px Manrope,sans-serif}
.media-tool-link span{font-size:11px;color:#848995;line-height:1.55}
.media-tool-link b{align-self:flex-end;color:var(--coral);font-size:17px}
.media-related{display:flex;flex-wrap:wrap;gap:10px}
.media-related a{padding:10px 13px;border:1px solid #eeeef2;border-radius:9px;color:var(--coral);font-size:12px;font-weight:700}
.media-conversion-directory{max-width:960px;margin:0 auto;padding:0 24px 64px}
@media(max-width:700px){.media-hero{padding:42px 14px 28px}.media-card{margin-top:23px}.media-dropzone{min-height:225px;margin:10px;padding:23px 14px}.media-workspace,.media-results{padding:20px 15px}.media-copy{padding:8px 18px 52px}.media-copy h2{font-size:20px}.media-tool-grid{grid-template-columns:1fr;gap:9px}.media-tool-link{min-height:85px;padding:15px}.media-directory{padding:18px 18px 52px}.media-conversion-directory{padding:0 18px 50px}.media-note{margin:15px 10px 0}.media-related{gap:8px}}

.media-page{background:radial-gradient(ellipse at 50% 0%,#eee9f8 0%,#f8f7fb 54%,#f5f3fa 100%)}
.media-card,.media-tool-link{background:#fff;border-color:#e7e3ee}
.media-dropzone{background:#fbfaff;border-color:#d8d1e6}
.media-dropzone.dragover,.media-dropzone:hover,.media-tool-link:hover{background:#f4effb;border-color:#c7b7e3}
.media-file-row,.media-result-row{background:#fff;border-color:#e7e3ee}
.media-file-icon{background:#f0ebf9;color:#7656bd}
.media-file-size,.media-tool-link span,.media-copy p,.media-copy li{color:#625d6d}
.media-remove{background:#f4f2f8;color:#706b7a}
.media-note{background:#f7f3fc;border-color:#ded4ef;color:#5f566f}
.media-copy section,.media-faq details{border-color:#e7e3ee}
.media-related a{border-color:#ded9e8;color:#6846a8}
.media-related a:hover{background:#f4effb;border-color:#c7b7e3}
.media-results h2:focus{outline-color:#7656bd}