/* Common tool-page shell and reusable file, option, preview, and progress controls. */
/* Shared tool-page shell */
.tool-page-kicker { color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 10px; }
.tool-page-description { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 8px; max-width: 620px; }
.tool-workspace { padding: clamp(20px,4vw,34px); }
.tool-input { margin-bottom: 24px; }
.tool-advanced { border-top: 1px solid var(--border); padding-top: 22px; margin-top: 22px; }
.tool-section-heading { color: var(--text); font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.tool-privacy { display: flex; gap: 18px; background: #153e35; border: 1px solid #153e35; border-radius: 7px; padding: 25px; margin: 18px 0 22px; color: #f6faf8; }
.tool-privacy-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px; background: rgba(194,242,215,.13); color: #b8efd0; }
.tool-privacy-icon svg { width: 23px; height: 23px; }
.tool-privacy-kicker { color: #a9dec1; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.tool-privacy h2 { font-size: 19px; font-weight: 700; letter-spacing: -.035em; line-height: 1.25; }
.tool-privacy p { color: #d7ebe1; font-size: 13px; line-height: 1.6; margin-top: 8px; }
.tool-privacy-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.tool-privacy-points span { color: #dff4e8; background: rgba(255,255,255,.08); border: 1px solid rgba(213,245,227,.2); border-radius: 4px; padding: 6px 8px; font-size: 11px; font-weight: 600; }
.info-card h2 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
@media(max-width:520px) { .tool-privacy { padding: 20px; gap: 12px; } .tool-privacy-icon { flex-basis: 36px; width: 36px; height: 36px; } }

.preview-size-wrap { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.preview-label .size-larger { color: #b3342c; }
.preview-label .size-smaller { color: #126846; }
.preview-label .size-same { color: var(--muted); }
.preview-label .size-delta { font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; }

.format-select-wrap { position: relative; max-width: 340px; }
.format-select-wrap::after { content: "⌄"; position: absolute; right: 16px; top: 50%; transform: translateY(-55%); color: var(--teal); font-size: 22px; pointer-events: none; }
.format-select-wrap select,.converter-option select { width: 100%; appearance: none; background: #fff; border: 1px solid var(--border); border-radius: 5px; color: var(--text); font: 600 14px 'DM Sans',sans-serif; padding: 12px 38px 12px 14px; cursor: pointer; }
.format-select-wrap select:hover,.converter-option select:hover { border-color: var(--teal); }
.format-select-wrap select:focus-visible,.converter-option select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.format-hint,.converter-option p { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 8px; }
.converter-option select { max-width: 340px; }
.tool-advanced[hidden],.converter-option[hidden],.btn-add-more[hidden] { display: none; }
.btn-add-more { font-size: 12px; font-weight: 600; color: var(--teal); background: var(--teal-light); border: 1px solid var(--teal-border); border-radius: 5px; padding: 7px 11px; cursor: pointer; position: relative; overflow: hidden; }
.btn-add-more input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.quality-row { margin-bottom:1.25rem; display:none; }
  .quality-row.show { display:block; }
  .quality-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  .quality-value { font-size:0.82rem; font-weight:500; color:var(--teal); }
  .slider-hints { display:flex; justify-content:space-between; font-size:0.68rem; color:var(--faint); margin-top:4px; }

  .files-section { display:none; margin-bottom:1.25rem; }
  .files-section.show { display:block; }
  .files-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .files-count { font-size:0.78rem; color:var(--muted); }
  .file-list { display:flex; flex-direction:column; gap:6px; }
  .file-item { display:flex; align-items:center; gap:10px; background:var(--warm-bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
  .file-icon { font-size:1.1rem; flex-shrink:0; }
  .file-info { flex:1; min-width:0; }
  .file-name { font-size:0.82rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .file-meta { font-size:0.72rem; color:var(--faint); margin-top:1px; }
  .file-remove { background:none; border:none; color:var(--faint); font-size:1rem; cursor:pointer; padding:0 4px; flex-shrink:0; transition:color 0.15s; }
  .file-remove:hover { color:var(--error); }

  .progress-section { display:none; margin-bottom:1.25rem; }
  .progress-section.show { display:block; }
  .progress-label { font-size:0.78rem; color:var(--muted); margin-bottom:6px; display:flex; justify-content:space-between; }
  .progress-track { height:6px; background:var(--border); border-radius:99px; overflow:hidden; }
  .progress-fill { height:100%; background:var(--teal-mid); border-radius:99px; transition:width 0.2s; width:0%; }

.image-original-info { background: var(--warm-bg); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin-bottom: 20px; color: var(--muted); font-size: 12px; }
.resize-dimensions { display: flex; align-items: end; gap: 12px; margin: 14px 0; }
.resize-dimensions > div { flex: 1; }
.resize-dimensions > span { padding-bottom: 10px; color: var(--muted); }
.resize-lock { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; color: var(--muted); font-size: 12px; cursor: pointer; }
.resize-lock input { width: 15px; height: 15px; accent-color: var(--teal); }
.resize-percent { display: flex; align-items: center; gap: 10px; }
.resize-percent input { max-width: 180px; }
.resize-result { color: var(--teal); font-size: 12px; margin: 8px 0 14px; }
.resize-upscale { color: #8b5b0a; background: #fff8e6; border: 1px solid #e9cf91; border-radius: 5px; padding: 10px 12px; font-size: 12px; margin: 14px 0; }
.converter-settings { margin-bottom: 22px; }
.converter-settings .mode-tab { border: 0; background: transparent; font-family: inherit; }
.converter-settings .mode-tab.active { background: var(--surface); }

/* Shared audio and video trimmer */
.trim-files { display:flex; flex-direction:column; gap:16px; margin:0 0 22px; }
.trim-files[hidden] { display:none; }
.trim-file { padding:16px; background:var(--warm-bg); border:1px solid var(--border); border-radius:7px; }
.trim-file-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.trim-file-icon { font-size:18px; }
.trim-file-info { flex:1; min-width:0; }
.trim-file-name { overflow:hidden; color:var(--text); font-size:13px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.trim-file-meta { margin-top:2px; color:var(--muted); font-size:11px; }
.trim-file-remove { padding:2px 5px; color:var(--faint); background:none; border:0; cursor:pointer; font:700 17px/1 sans-serif; }
.trim-file-remove:hover { color:var(--error); }
.trim-preview { display:block; width:100%; max-height:320px; margin:0 0 15px; background:#101513; border-radius:5px; }
audio.trim-preview { min-height:38px; background:transparent; }
.trim-range-row { display:grid; grid-template-columns:50px minmax(0,1fr) 82px; align-items:center; gap:10px; margin:9px 0; }
.trim-range-row label { margin:0; color:var(--muted); font-size:11px; font-weight:700; }
.trim-range-row input[type="range"] { width:100%; accent-color:var(--teal); }
.trim-time-input { width:82px; padding:7px 8px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:5px; font:600 12px 'DM Sans',sans-serif; text-align:center; }
.trim-time-input:focus { border-color:var(--teal); outline:2px solid var(--teal-light); }
.trim-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; color:var(--muted); font-size:11px; }
.trim-summary strong { color:var(--teal); }
.trim-actions { display:flex; flex-wrap:wrap; gap:7px; }
.trim-actions button { padding:6px 9px; color:var(--teal); background:var(--surface); border:1px solid var(--teal-border); border-radius:4px; cursor:pointer; font:600 10px 'DM Sans',sans-serif; }
.trim-actions button:hover { background:var(--teal-light); }
.trim-add-more { margin:-5px 0 20px; }
@media(max-width:520px) { .trim-range-row { grid-template-columns:42px minmax(0,1fr) 74px; gap:7px; } .trim-time-input { width:74px; } .trim-summary { align-items:flex-start; flex-direction:column; } }

/* Shared merge and video/audio combination pages */
.merge-hint { margin:8px 0 0; color:var(--muted); font-size:11px; }
.media-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.media-slot { position:relative; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px; overflow:hidden; text-align:center; background:var(--warm-bg); border:2px dashed var(--border); border-radius:7px; transition:border-color .15s,background .15s; }
.media-slot:hover,.media-slot.dragover { border-color:var(--teal); background:var(--teal-light); }
.media-slot.loaded { border-style:solid; border-color:var(--teal-border); }
.media-slot input[type="file"] { position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:0; cursor:pointer; }
.media-slot-clear { position:absolute; z-index:2; top:8px; right:8px; padding:3px 6px; color:var(--faint); background:var(--surface); border:1px solid var(--border); border-radius:4px; cursor:pointer; font:700 15px/1 sans-serif; }
.media-slot-clear[hidden] { display:none; }
.media-slot-icon { margin-bottom:6px; font-size:24px; }
.media-slot-label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.media-slot-name { max-width:100%; margin-top:7px; overflow:hidden; color:var(--text); font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.media-slot-meta { margin-top:3px; color:var(--muted); font-size:10px; }
.combine-editor[hidden] { display:none; }
.combine-preview { position:relative; display:grid; place-items:center; min-height:260px; overflow:hidden; background:#101715; border:1px solid #203c35; border-radius:7px 7px 0 0; }
.combine-preview video,.combine-preview img { display:block; width:100%; max-height:390px; object-fit:contain; }
.combine-preview-empty { color:#91a39c; font-size:12px; }
.combine-preview-badge { position:absolute; top:12px; left:12px; padding:5px 8px; color:#dcebe5; background:rgba(9,23,19,.82); border:1px solid rgba(210,237,225,.18); border-radius:4px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.combine-transport { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 13px; background:#17231f; border:1px solid #203c35; border-top:0; border-radius:0 0 7px 7px; color:#dcebe5; }
.combine-play { width:35px; height:31px; padding:0; color:#123c31; background:#bdebd1; border:0; border-radius:4px; cursor:pointer; font:700 13px/1 sans-serif; }
.combine-seek { width:100%; accent-color:#8bd0ae; }
.combine-time { min-width:82px; color:#b8cbc3; font:600 10px 'DM Sans',sans-serif; text-align:right; }
.combine-timeline { margin-top:18px; padding:15px; background:var(--warm-bg); border:1px solid var(--border); border-radius:7px; }
.combine-ruler { display:flex; justify-content:space-between; margin:0 0 8px 91px; color:var(--faint); font-size:9px; }
.combine-track { display:grid; grid-template-columns:78px minmax(0,1fr); align-items:center; gap:12px; margin:7px 0; }
.combine-track-label { min-width:0; }
.combine-track-label strong { display:block; overflow:hidden; color:var(--text); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.combine-track-label span { color:var(--faint); font-size:9px; }
.combine-lane { position:relative; height:38px; overflow:hidden; background:#e4e9e6; border:1px solid #d5ddd9; border-radius:4px; cursor:pointer; }
.combine-lane::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),rgba(53,83,72,.09) 25%); pointer-events:none; }
.combine-clip { position:absolute; top:4px; bottom:4px; left:0; min-width:4px; overflow:hidden; border-radius:3px; }
.combine-video-clip { right:4px; left:4px; background:#315d50; }
.combine-video-clip::after { content:"VIDEO"; position:absolute; left:9px; top:7px; color:#dff2e9; font-size:9px; font-weight:700; letter-spacing:.08em; }
.combine-audio-clip { background:#83c9a8; border:1px solid #4f9d79; cursor:grab; touch-action:none; }
.combine-audio-clip:active { cursor:grabbing; }
.combine-audio-clip::before { content:""; position:absolute; inset:0; opacity:.42; background:repeating-linear-gradient(90deg,transparent 0 3px,#286d50 3px 4px,transparent 4px 7px,#286d50 7px 9px); }
.combine-audio-clip::after { content:"AUDIO"; position:absolute; left:9px; top:7px; color:#143d30; font-size:9px; font-weight:800; letter-spacing:.08em; }
.combine-audio-clip.clipped { border-right:4px solid #b87732; }
.combine-playhead { position:absolute; z-index:4; top:0; bottom:0; width:2px; background:#f1a84b; pointer-events:none; }
.combine-playhead::before { content:""; position:absolute; top:-1px; left:-3px; width:8px; height:8px; background:#f1a84b; transform:rotate(45deg); }
.combine-timeline-note { margin:9px 0 0 90px; color:var(--muted); font-size:10px; line-height:1.45; }
.combine-align { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:16px 0; }
.combine-align-label { margin-right:3px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.combine-align button { padding:7px 10px; color:var(--teal); background:var(--surface); border:1px solid var(--teal-border); border-radius:4px; cursor:pointer; font:700 10px 'DM Sans',sans-serif; }
.combine-align button.active { color:#fff; background:var(--teal); border-color:var(--teal); }
.combine-offset { display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--muted); font-size:10px; }
.combine-offset input { width:76px; padding:7px 8px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:4px; font:600 11px 'DM Sans',sans-serif; text-align:center; }
.combine-mixer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.combine-channel { padding:13px; background:var(--warm-bg); border:1px solid var(--border); border-radius:6px; }
.combine-channel-head { display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.combine-channel-head strong { flex:1; color:var(--text); font-size:11px; }
.combine-channel-head output { color:var(--teal); font-size:10px; font-weight:700; }
.combine-channel input[type="range"] { width:100%; }
.combine-mute { padding:4px 7px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:3px; cursor:pointer; font:700 9px 'DM Sans',sans-serif; }
.combine-mute.active { color:#fff; background:#a44b43; border-color:#a44b43; }
.combine-actions { display:grid; grid-template-columns:minmax(130px,.42fr) 1fr; gap:9px; margin-top:18px; }
.combine-preview-btn { padding:13px; color:var(--teal); background:var(--surface); border:1px solid var(--teal-border); border-radius:5px; cursor:pointer; font:700 12px 'DM Sans',sans-serif; }
.combine-preview-btn:disabled { opacity:.48; cursor:not-allowed; }
@media(max-width:600px) { .media-pair,.combine-mixer { grid-template-columns:1fr; } .combine-preview { min-height:190px; } .combine-track { grid-template-columns:60px minmax(0,1fr); gap:8px; } .combine-ruler,.combine-timeline-note { margin-left:68px; } .combine-offset { width:100%; margin:4px 0 0; } .combine-actions { grid-template-columns:1fr; } }
.image-original-info[hidden],.resize-dimensions[hidden],.resize-lock[hidden],#percentInputs[hidden],.resize-upscale[hidden] { display: none; }
@media(max-width:480px) { .resize-dimensions { gap: 7px; } }
.compress-png-notice { background: #eef5fb; border: 1px solid #c5dceb; border-radius: 5px; color: #315a73; padding: 12px 14px; font-size: 12px; line-height: 1.6; margin-bottom: 18px; }
.compress-png-notice strong { display: block; color: #21485e; }
.compress-target { display: flex; align-items: center; gap: 10px; }
.compress-target input { max-width: 180px; }
.compress-target span { color: var(--muted); font-size: 13px; }
.compress-target-result { background: #fff8e6; border: 1px solid #e9cf91; border-radius: 5px; color: #8b5b0a; padding: 10px 12px; font-size: 12px; margin-top: 14px; }
.compress-png-notice[hidden],#qualitySettings[hidden],#targetSettings[hidden],#compressionControls[hidden],.compress-target-result[hidden] { display: none; }
.tool-advanced .mode-tab { border: 0; background: transparent; font-family: inherit; }
.tool-advanced .mode-tab.active { background: var(--surface); }

/* Photos to GIF */
.gif-frames { margin: 4px 0 22px; }
.gif-frames[hidden] { display: none; }
.gif-frames-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.gif-frames-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(92px,1fr)); gap: 9px; }
.gif-frame { position: relative; aspect-ratio: 1; overflow: hidden; cursor: grab; background: var(--warm-bg); border: 1px solid var(--border); border-radius: 6px; transition: border-color .15s,box-shadow .15s,opacity .15s; }
.gif-frame:active { cursor: grabbing; }
.gif-frame.dragging { opacity: .4; }
.gif-frame.drag-over { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-light); }
.gif-frame img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gif-frame-number { position: absolute; left: 5px; bottom: 5px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; color: #fff; background: rgba(17,38,31,.72); border-radius: 3px; font-size: 10px; font-weight: 700; }
.gif-frame-remove { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 23px; height: 23px; padding: 0; color: #fff; background: rgba(17,38,31,.72); border: 0; border-radius: 3px; cursor: pointer; font: 700 15px/1 sans-serif; }
.gif-frame-remove:hover { background: #9f3029; }
.gif-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.gif-settings select { width: 100%; margin-top: 7px; }
.media-result-preview { border-top: 1px solid var(--border); padding-top: 22px; margin: 22px 0; }
.media-result-box { max-width: 640px; margin: 0 auto; }
.media-result-box .preview-img-wrap { min-height: 220px; aspect-ratio: auto; }
.media-result-box .preview-img-wrap img { max-height: 420px; }
.media-preview-meta { margin-top: 9px; color: var(--muted); font-size: 12px; text-align: center; }
.media-preview-download { display: block; max-width: 640px; margin: 14px auto 0; }
@media(max-width:520px) { .gif-settings { grid-template-columns: 1fr; } .gif-frames-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* Strip metadata */
.metadata-findings,.metadata-report { margin: 4px 0 22px; }
.metadata-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--text); font-size:13px; font-weight:700; }
.metadata-heading span { color:var(--muted); font-size:11px; font-weight:600; }
.metadata-table-wrap { max-height:280px; overflow:auto; border:1px solid var(--border); border-radius:6px; background:var(--warm-bg); }
.metadata-table { width:100%; border-collapse:collapse; font-size:12px; }
.metadata-table tr { border-bottom:1px solid var(--border); }
.metadata-table tr:last-child { border-bottom:0; }
.metadata-table th,.metadata-table td { padding:9px 11px; text-align:left; vertical-align:top; }
.metadata-table th { width:38%; color:var(--muted); font-weight:600; white-space:normal; }
.metadata-table td { color:var(--text); overflow-wrap:anywhere; }
.metadata-table .metadata-location { background:#fff8e6; }
.metadata-table .metadata-location th { color:#7a5600; }
.metadata-message { margin:4px 0 20px; padding:11px 13px; border:1px solid var(--teal-border); border-radius:6px; color:var(--teal-text); background:var(--teal-light); font-size:12px; line-height:1.55; }
.metadata-warning { color:#6c5100; background:#fff8e6; border-color:#ead7a3; }
.metadata-report { margin-top:22px; padding-top:20px; border-top:1px solid var(--border); }
.metadata-report-item { padding:10px 0; border-bottom:1px solid var(--border); font-size:12px; }
.metadata-report-item:last-child { border-bottom:0; }
.metadata-report-item p { margin:4px 0 0; color:var(--teal-text); }
.metadata-report-item span { display:block; margin-top:3px; color:var(--muted); }
.metadata-findings[hidden],.metadata-message[hidden],.metadata-report[hidden] { display:none; }
.metadata-explanation { margin:4px 0 22px; padding:18px; color:#eef8f3; background:#143f36; border:1px solid #143f36; border-radius:7px; }
.metadata-explanation[hidden] { display:none; }
.metadata-explanation-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; font-size:15px; font-weight:700; }
.metadata-explanation-header span:last-child { color:#a8dfc5; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.metadata-narrative { margin:0; color:#f2faf6; font-size:14px; line-height:1.72; }
.metadata-privacy-impact { margin-top:15px; padding:12px; color:#513d08; background:#fff4d8; border:1px solid #ead18e; border-radius:5px; }
.metadata-privacy-impact strong,.metadata-removal-preview strong { display:block; margin-bottom:4px; font-size:12px; }
.metadata-privacy-impact p,.metadata-removal-preview p { margin:0; font-size:11px; line-height:1.55; }
.metadata-removal-preview { margin-top:10px; padding:12px; color:#173e34; background:#bce8d2; border-radius:5px; }
.metadata-removal-preview p { color:#285a4c; }
.metadata-certainty { margin-top:12px; color:#b9d8ca; font-size:10px; }
.metadata-certainty summary { cursor:pointer; font-weight:700; }
.metadata-certainty p { margin:7px 0 0; color:#d1e5dc; line-height:1.55; }

/* PDF tools */
.pdf-file-info { margin:4px 0 20px; padding:11px 13px; color:var(--muted); background:var(--warm-bg); border:1px solid var(--border); border-radius:6px; font-size:12px; }
.pdf-file-info[hidden],.pdf-page-picker[hidden],.pdf-image-list[hidden],.pdf-settings > div[hidden] { display:none; }
.pdf-page-picker,.pdf-image-list { margin:4px 0 22px; }
.pdf-picker-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--text); font-size:13px; font-weight:700; }
.pdf-picker-heading button { margin-left:6px; padding:5px 8px; color:var(--teal); background:var(--teal-light); border:1px solid var(--teal-border); border-radius:4px; font:600 11px/1.2 inherit; cursor:pointer; }
.pdf-page-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; max-height:420px; overflow:auto; margin-bottom:15px; }
.pdf-page-thumb { overflow:hidden; background:#fff; border:2px solid var(--border); border-radius:6px; cursor:pointer; }
.pdf-page-thumb.selected { border-color:var(--teal); }
.pdf-page-thumb img { display:block; width:100%; aspect-ratio:.707; object-fit:contain; background:#f2f2ef; }
.pdf-page-thumb span { display:flex; align-items:center; justify-content:space-between; padding:5px 7px; color:var(--muted); font-size:10px; }
.pdf-page-thumb input { width:14px; height:14px; accent-color:var(--teal); }
.pdf-page-picker > input { width:100%; margin-top:7px; }
.pdf-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pdf-settings label { display:block; margin-bottom:7px; }
.pdf-settings select { width:100%; }
.pdf-image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; }
.pdf-image-thumb { overflow:hidden; cursor:grab; background:#fff; border:1px solid var(--border); border-radius:6px; transition:border-color .15s,opacity .15s,box-shadow .15s; }
.pdf-image-thumb:active { cursor:grabbing; }
.pdf-image-thumb.dragging { opacity:.4; }
.pdf-image-thumb.drag-over { border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-light); }
.pdf-image-thumb img { display:block; width:100%; aspect-ratio:.707; object-fit:contain; background:#f2f2ef; pointer-events:none; }
.pdf-image-thumb span { display:flex; align-items:center; justify-content:space-between; padding:6px 7px; color:var(--muted); font-size:10px; }
.pdf-image-thumb button { padding:0; color:var(--faint); background:none; border:0; cursor:pointer; font:700 15px/1 sans-serif; }
.pdf-image-thumb button:hover { color:var(--error); }
@media(max-width:520px) { .pdf-settings { grid-template-columns:1fr; } .pdf-page-grid,.pdf-image-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.file-drag-handle { color:var(--faint); cursor:grab; }
.split-range-row { margin:-2px 0 7px 34px; }
.split-range-row input { width:100%; padding:8px 10px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:5px; font:inherit; font-size:12px; }
.split-range-row input:focus { outline:2px solid var(--teal-light); border-color:var(--teal); }