/* Frosted export workspace. Solid base remains readable without backdrop-filter. */
#exportDialog.export-dialog{width:min(1040px,calc(100vw - 40px));max-height:calc(100dvh - 40px);padding:30px;border:1px solid #ffffffd9;border-radius:28px;color:#29334c;background:#f5f5fc;box-shadow:0 40px 120px #17213940,inset 0 1px 0 #fff;overflow:auto}
@supports(backdrop-filter:blur(20px)){#exportDialog.export-dialog{background:linear-gradient(125deg,#ffffffed,#f4f2ffeb 50%,#eef7ffef);backdrop-filter:blur(30px) saturate(135%);-webkit-backdrop-filter:blur(30px) saturate(135%)}}
#exportDialog::backdrop{background:radial-gradient(ellipse at 25% 20%,#9c89ce38,transparent 60%),#14203980;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#exportDialog .export-head{margin:0 0 24px;padding-bottom:22px;border-bottom:1px solid #dce1ef}
#exportDialog .export-head h2{font-size:29px;color:#26324b;letter-spacing:-.7px;margin-top:8px}
#exportDialog .export-kicker{display:flex;align-items:center;gap:8px;font:650 10px/1.6 system-ui,sans-serif;letter-spacing:2px;color:#6c6987}
.export-kicker i{width:7px;height:7px;border-radius:50%;background:#8e78c8;box-shadow:0 0 0 4px #e7dff5}
#exportDialog .icon-button{background:#ffffffa8;border:1px solid white;box-shadow:0 3px 12px #34334d09;transition:transform .18s,background .18s}
#exportDialog .icon-button:hover{background:#fff;transform:rotate(5deg)}
.export-workspace{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:30px;align-items:start}
.export-overview{padding:0;min-width:0;position:sticky;top:0}
#exportDialog .export-project{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px;background:#ffffffa8;border:1px solid #fff;border-radius:20px;box-shadow:0 10px 30px #4a497a0b}
#exportDialog .export-project img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;border-radius:12px;background:#161d2c}
#exportDialog .export-project>div{padding:20px 10px 14px}
#exportDialog .export-project strong{font-size:17px;white-space:normal;overflow-wrap:anywhere;line-height:1.5;color:#2e3750}
#exportDialog .export-project div>span{font-size:12px;color:#707b92}
#exportDialog .export-local{display:block;align-self:flex-start;margin:0 10px 12px;padding:6px 10px;border:1px solid #dbe7e2;background:#edf6f1;color:#3f695b;font-size:11px;border-radius:20px}
.export-overview-note{font-size:12px;line-height:1.8;color:#778198;text-align:center;margin:16px 10px}
.export-options{min-width:0}
#exportDialog .field{font-size:13px;font-weight:550;color:#45516b}
#exportDialog .export-name{margin:0 0 22px}
#exportDialog .field input,#exportDialog .field select{min-height:46px;background:#ffffffce;border:1px solid #d4daea;border-radius:12px;color:#29364e;box-shadow:inset 0 1px 2px #27385704;transition:border-color .18s,box-shadow .18s}
#exportDialog .field input:hover,#exportDialog .field select:hover{border-color:#acb6d2}
#exportDialog .hint{font-size:12px;color:#69768d;font-weight:400;line-height:1.7}
#exportDialog .export-tabs{padding:5px;background:#e4e7f180;border:1px solid #dce0ed;border-radius:14px;gap:4px}
#exportDialog .export-tabs button{font-size:13px;min-height:43px;color:#65718a;border-radius:10px}
#exportDialog .export-tabs button[aria-selected=true]{color:#554b93;background:#fffffff0;box-shadow:0 3px 10px #3b395815,inset 0 0 0 1px white}
#exportDialog .export-section-heading{margin:22px 0 18px}
#exportDialog .export-section-heading h3{font-size:16px;color:#35425b}
#exportDialog .export-section-heading p{font-size:12px;color:#69768d}
#exportDialog .export-settings{gap:14px}
#exportDialog .export-settings select{font-size:13px}
#exportDialog .export-specs{gap:12px;background:#ffffff69;border:1px solid #fff;padding:15px;border-radius:13px;margin-top:18px;font-size:11px;color:#68748c}
#exportDialog .export-specs strong{font-size:13px;font-weight:600;color:#39465f;font-variant-numeric:tabular-nums}
#exportDialog .export-notice{background:transparent;border-left:2px solid #c6bddf;border-radius:0;padding:0 0 0 12px;margin:18px 0;font-size:12px;color:#69738a;line-height:1.8}
#exportDialog .export-main-action{border:1px solid #ffffff40;background:linear-gradient(120deg,#7661af,#566bbb);box-shadow:0 8px 22px #6961a82b,inset 0 1px 0 #ffffff30;min-height:50px;border-radius:13px;font-size:14px;letter-spacing:.4px;transition:transform .2s,box-shadow .2s,filter .2s}
#exportDialog .export-main-action:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px #6961a83d;filter:brightness(1.07)}
#exportDialog button:active:not(:disabled){transform:scale(.98)}
#exportDialog .export-file-grid{gap:10px;margin-top:0}
#exportDialog .export-file-grid button{background:#ffffffb3;border:1px solid #fff;border-radius:14px;padding:16px;box-shadow:0 2px 8px #39426405}
#exportDialog .export-file-grid button:hover:not(:disabled){border-color:#b8abdb;background:#fff;box-shadow:0 8px 20px #4e438d12}
#exportDialog .export-file-grid .export-file-type{font-size:10px;background:#ece8f8;color:#69559a;padding:5px 7px}
#exportDialog .export-file-grid b{font-size:14px;color:#36425b}
#exportDialog .export-file-grid button>span:last-of-type{font-size:11px;color:#6e7990}
#exportDialog .export-file-grid small{font-size:10px;color:#7b659d}
#exportDialog .export-progress-box{background:#ffffffb0;border:1px solid white;border-radius:14px;box-shadow:0 4px 20px #4e438d0a}
#exportDialog .export-progress-box>div{color:#60518e;font-size:13px}
#exportDialog .export-progress-box progress{accent-color:#7763b2;height:9px;border:0;border-radius:20px;overflow:hidden;background:#e5e1f0}
#exportDialog progress::-webkit-progress-bar{background:#e5e1f0;border-radius:20px}
#exportDialog progress::-webkit-progress-value{background:linear-gradient(90deg,#9680cc,#667eca);border-radius:20px;transition:width .2s}
#exportDialog .export-status{font-size:12px;color:#52647f}
#exportDialog :focus-visible{outline:3px solid #9f8ac9;outline-offset:3px}
.media-poster-hint{position:absolute;bottom:12px;left:12px;background:#192236c9;backdrop-filter:blur(8px);color:#fff;border:1px solid #ffffff26;border-radius:20px;padding:7px 11px;font-size:11px;pointer-events:none}
@media(max-width:760px){#exportDialog.export-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:22px;border-radius:22px}.export-workspace{grid-template-columns:1fr;gap:20px}.export-overview{position:static}#exportDialog .export-project{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:12px}#exportDialog .export-project img{width:100px;height:72px;aspect-ratio:auto;grid-row:1/3}#exportDialog .export-project>div{padding:2px 0}#exportDialog .export-project strong{font-size:14px}#exportDialog .export-local{grid-column:2;margin:0;justify-self:start;font-size:10px;padding:4px 8px}.export-overview-note{display:none}#exportDialog .export-head{margin-bottom:18px;padding-bottom:17px}#exportDialog .export-head h2{font-size:25px}}
@media(max-width:420px){#exportDialog.export-dialog{padding:17px}#exportDialog .export-settings{grid-template-columns:1fr}#exportDialog .export-specs{padding:12px;gap:8px}#exportDialog .export-specs strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){#exportDialog[open]{animation:none}#exportDialog *{transition:none!important}#exportDialog button:hover,#exportDialog button:active{transform:none!important}}

body.exporting #exportDialog::backdrop{background:#ebedf5;backdrop-filter:blur(14px)}
body.exporting #exportDialog .export-overview-note{visibility:hidden}
body.exporting #exportDialog .export-head .icon-button{opacity:.35;cursor:not-allowed}