/*
 * Shared styles for the media tool pages (image / video / audio / PDF).
 *
 * This used to be page-template/inc-media-tool-styles.css.php, inlined inside a
 * <style> tag by 16 templates — 5,042 bytes re-sent on every single tool page
 * view with no chance of being cached. It is now a real stylesheet enqueued by
 * gjw_tool_styles() in inc/tool-scripts.php, keyed on the page template.
 *
 * It is deliberately NOT part of site.css: the `*` and `body` rules below would
 * otherwise restyle every page on the site, including the home page.
 *
 * Each page still sets --accent / --accent-light / --accent-dark / --accent-ring
 * from its own inline <style>, since those differ per tool.
 */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:"Noto Sans TC",system-ui,sans-serif; background:#f3f4f6; color:#1f2937; }

.mt-page    { max-width:960px; margin:0 auto; padding:32px 16px 72px; }
.mt-title   { font-size:1.8rem; font-weight:700; margin:0 0 4px; }
.mt-sub     { color:#6b7280; margin:0 0 28px; font-size:.95rem; }

/* Upload zone */
.mt-upload-zone {
    border:2px dashed var(--accent-light,#a5b4fc); border-radius:14px; background:#fff;
    padding:48px 20px; text-align:center; cursor:pointer; transition:.2s; position:relative;
}
.mt-upload-zone.drag-over { border-color:var(--accent); background:var(--accent-light); box-shadow:0 0 0 4px var(--accent-ring); }
.mt-upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.mt-upload-icon  { font-size:3rem; line-height:1; }
.mt-upload-label { font-size:1.1rem; font-weight:600; color:var(--accent); margin:8px 0 4px; }
.mt-upload-hint  { font-size:.82rem; color:#9ca3af; }

/* File info bar */
.mt-file-bar {
    background:#fff; border-radius:10px; padding:10px 16px; font-size:.88rem; color:#374151;
    box-shadow:0 1px 3px rgba(0,0,0,.07); margin:12px 0;
}

/* Cards */
.mt-card { background:#fff; border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08); overflow:hidden; margin-bottom:14px; }
.mt-card-header {
    padding:12px 16px; background:#f9fafb; border-bottom:1px solid #f3f4f6;
    font-size:.82rem; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:.05em;
}
.mt-card > *:not(.mt-card-header) { padding:14px 16px; }

/* Layout helpers */
.mt-row   { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.mt-group { display:flex; flex-direction:column; gap:5px; }
.mt-group.grow { flex:1; min-width:140px; }
.mt-label { font-size:.78rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; }
.mt-label span { font-weight:400; color:#9ca3af; margin-left:4px; }
.mt-hint  { font-size:.75rem; color:#6b7280; margin-top:4px; }

/* Button group */
.mt-btn-group { display:flex; gap:5px; flex-wrap:wrap; }
.mt-btn {
    padding:5px 13px; border:1px solid #e5e7eb; background:#fff;
    border-radius:7px; cursor:pointer; font-size:.84rem; font-weight:600; color:#6b7280; transition:.15s;
}
.mt-btn.active           { background:var(--accent); color:#fff; border-color:var(--accent); }
.mt-btn:hover:not(.active) { border-color:var(--accent); color:var(--accent); }

/* Range */
.mt-range { width:100%; accent-color:var(--accent); cursor:pointer; }

/* Warning */
.mt-warning {
    font-size:.82rem; color:#92400e; background:#fffbeb; border:1px solid #fde68a;
    border-radius:8px; padding:8px 14px; margin:8px 0 14px;
}

/* Process button */
.mt-process-btn {
    width:100%; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:10px;
    font-size:1rem; font-weight:700; cursor:pointer; transition:.15s; margin-bottom:4px;
}
.mt-process-btn:hover    { background:var(--accent-dark); }
.mt-process-btn:disabled { background:#9ca3af; cursor:not-allowed; }

/* Progress */
.mt-progress-panel { margin:14px 0; }
.mt-progress-inner { background:#fff; border-radius:12px; padding:20px 24px; box-shadow:0 1px 4px rgba(0,0,0,.08); text-align:center; }
.mt-spinner {
    display:inline-block; width:22px; height:22px;
    border:3px solid var(--accent-light,#e0e7ff); border-top-color:var(--accent);
    border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-right:8px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.mt-progress-bar-wrap { height:6px; background:#f3f4f6; border-radius:3px; overflow:hidden; margin-top:12px; }
.mt-progress-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .3s; width:0; }

/* Error */
.mt-error {
    background:#fef2f2; border:1px solid #fca5a5; color:#b91c1c;
    border-radius:8px; padding:12px 16px; margin:12px 0; font-size:.9rem;
}

/* Result */
.mt-result-panel { background:#fff; border-radius:12px; padding:16px 20px; box-shadow:0 1px 4px rgba(0,0,0,.08); margin-top:14px; }
.mt-result-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.mt-result-info   { font-size:.88rem; color:#374151; }
.mt-download-btn  {
    padding:8px 20px; background:var(--accent); color:#fff; border-radius:8px;
    font-size:.9rem; font-weight:700; text-decoration:none; display:inline-block; transition:.15s;
}
.mt-download-btn:hover { background:var(--accent-dark); }
.mt-another-btn {
    display:block; margin:14px 0 0; padding:9px 20px; border:1px solid #d1d5db; background:#fff;
    border-radius:8px; cursor:pointer; font-size:.88rem; color:#374151; transition:.15s; width:100%;
}
.mt-another-btn:hover { border-color:var(--accent); color:var(--accent); }

/* Player wrap */
.mt-player-wrap { margin:10px 0; }