/* Local media tools: readable controls, transparent previews, and clear results. */
.is-media-tool .container { max-width:1180px; }
.is-media-tool .tool-layout { display:block; }
.is-media-tool .tool-side { display:none; }
.is-media-tool .tool-hero { padding:28px 0 24px; }
.is-media-tool .tool-hero .lede { max-width:780px; }
.is-media-tool .calc-card { padding:28px; }
.is-media-tool .article-block { max-width:920px; }
.media-tool { min-width:0; }
.media-tool [hidden] { display:none !important; }
.media-tool fieldset { min-width:0; border:0; padding:0; margin:0; }
.media-tool legend { font-weight:700; margin:12px 0; }
.media-dropzone { position:relative; padding:28px; border:2px dashed var(--border-strong); border-radius:14px; background:var(--bg-subtle); text-align:center; transition:border-color .15s,background .15s; }
.media-dropzone.is-dragging,.media-dropzone.is-dragover,.media-dropzone.drag-over,.media-dropzone[data-dragging="true"] { border-color:var(--link); background:var(--result-bg); }
.media-dropzone:focus-within { outline:2px solid var(--focus-ring); outline-offset:3px; }
.media-dropzone h2,.media-dropzone strong { font-size:1.1rem; }
.media-drop-icon { display:block; color:var(--link); font-size:2rem; line-height:1; margin:0 0 12px; }
.media-file-picker,.media-file-label { cursor:pointer; margin:12px 8px 0 0; }
.media-file-picker:focus-within,.media-file-label:focus-within { outline:2px solid var(--focus-ring); outline-offset:3px; }
.media-dropzone p { max-width:660px; margin:8px auto; }
.media-dropzone input[type="file"] { display:block; width:100%; max-width:520px; margin:18px auto 0; font-size:.88rem; padding:8px; color:var(--text); background:var(--bg-elevated); border:1px solid var(--border); border-radius:8px; }
.media-dropzone input::file-selector-button { border:0; padding:10px 14px; margin-right:12px; border-radius:5px; background:var(--brand-700); color:#fff; cursor:pointer; font:600 .85rem var(--font-sans); }
.media-tool .media-help,.media-tool .hint { color:var(--text-muted); font-size:.85rem; line-height:1.65; }
.media-file-summary { padding:12px 0; font-size:.9rem; overflow-wrap:anywhere; }
.media-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0 12px; }
.media-options .field { margin:0; min-width:0; }
.media-options label { display:block; font-weight:600; font-size:.88rem; margin-bottom:8px; }
.media-options input,.media-options select { max-width:100%; }
.media-options input[type="range"] { width:100%; padding:0; margin:12px 0; accent-color:var(--brand-700); }
.media-options input[type="color"] { height:44px; width:100%; padding:4px; }
.media-options input[type="checkbox"] { width:auto; margin-right:7px; }
.media-options .media-check { display:flex; align-items:center; gap:8px; }
.media-quality-value,.media-dimension-output { font-variant-numeric:tabular-nums; color:var(--link); font-weight:600; }
.media-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:22px 0; }
.media-actions .btn { min-height:44px; }
.media-tool button:disabled,.media-tool input:disabled,.media-tool select:disabled { opacity:.55; cursor:not-allowed; }
.media-status { margin:12px 0; padding:12px 15px; background:var(--bg-subtle); border-radius:8px; font-size:.9rem; overflow-wrap:anywhere; }
.media-status:empty { display:none; }
.media-status.is-error,.media-status[data-state="error"] { color:var(--danger-500); border:1px solid currentColor; }
.media-status.is-success { color:var(--link); background:var(--result-bg); }
.media-tool .error-banner:empty { display:none; }
.media-tool progress { display:block; width:100%; height:12px; margin:14px 0 8px; accent-color:var(--brand-700); }
.media-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0; }
.media-preview-card { margin:0; min-width:0; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--bg-elevated); }
.media-preview-card h2,.media-preview-card h3,.media-preview-card figcaption { font-size:.95rem; font-weight:650; margin:0 0 12px; }
.media-preview-card img { display:block; width:100%; height:270px; object-fit:contain; border-radius:8px; background-color:#fff; background-image:linear-gradient(45deg,#e8e8e8 25%,transparent 25%),linear-gradient(-45deg,#e8e8e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8e8e8 75%),linear-gradient(-45deg,transparent 75%,#e8e8e8 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.media-preview-card video { display:block; width:100%; max-height:340px; border-radius:8px; background:#101512; }
.media-preview-card p { font-size:.85rem; margin:12px 0 0; overflow-wrap:anywhere; }
.media-preview-placeholder { display:grid; place-items:center; min-height:160px; padding:24px; text-align:center; color:var(--text-muted); background:var(--bg-subtle); border-radius:8px; }
.media-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; padding:18px; background:var(--result-bg); border:1px solid var(--result-border); border-radius:12px; }
.media-stats > div { min-width:0; }
.media-stats dt,.media-stats span { font-size:.8rem; color:var(--text-muted); }
.media-stats dd { margin:5px 0 0; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.media-stats strong { display:block; font-size:1.15rem; margin-top:4px; overflow-wrap:anywhere; }
p.media-stats { display:block; padding:12px; line-height:1.7; font-variant-numeric:tabular-nums; }
p.media-stats:empty { display:none; }
.media-savings { color:var(--link); font-weight:600; }
.media-savings[data-state="larger"] { color:var(--text-muted); }
.media-options small,.field-help { display:block; font-size:.82rem; color:var(--text-muted); line-height:1.65; margin-top:6px; }
.media-estimate { color:var(--link); font-weight:600; font-size:.9rem; margin:20px 0 10px; }
.media-notice { font-size:.88rem; border-left:3px solid var(--border-strong); padding:12px 16px; background:var(--bg-subtle); }
.media-result-heading { margin-top:24px; }
.media-tool .media-download { display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.media-tool [aria-busy="true"] { cursor:progress; }
@media(max-width:760px) { .media-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .is-media-tool .calc-card { padding:20px; } .media-dropzone { padding:20px 14px; } }
@media(max-width:520px) { .media-options,.media-preview-grid { grid-template-columns:1fr; gap:16px; } .media-stats { grid-template-columns:1fr; gap:14px; } .is-media-tool .calc-card { padding:16px; } .media-actions { align-items:stretch; } .media-actions .btn { flex:1; } .media-preview-card img { height:220px; } .media-dropzone input[type="file"] { font-size:.8rem; } }