/* Shared JDAD surfaces; compression and canvas output are untouched. */
:root {--accent-soft:#8faed4;--green:#9ecab6;--red:#e9a2a8}
.compress-page {padding-top:54px}
.compress-intro {padding-top:14px;border-color:#ffffff12;gap:40px}
.compress-intro h1 {font-size:clamp(48px,6vw,80px);font-weight:500;letter-spacing:-.05em;line-height:1.1}
.intro-desc {font-size:12px;line-height:1.9;color:#a8b4c7;margin-top:20px}
.compress-metrics .metric strong {font-size:26px;font-weight:500}
.total-stats,.batch-mode,.size-saved {background:linear-gradient(145deg,#d3e0f43b,#758bab1f 48%,#a1b6d32e);border:1px solid #d3e1f635;color:#dce5f2;border-radius:12px;box-shadow:inset 0 1px 1px #f2f8ff25;font-size:11px;font-weight:400}
.total-stats strong {font-weight:500}.total-stat-divider {background:#ffffff20}
.mode-tabs {background:#171e29b8;border-color:#ffffff18;border-radius:26px;padding:5px;gap:4px;margin-top:28px}
.mode-tab {border-radius:22px;font-weight:400;font-size:12px;padding:9px 22px}
.mode-tab.active {background:#e8edf5;color:#1a2230}.mode-tab:hover {background:#ffffff09}.mode-tab.active:hover {background:#f2f5fa}
.upload-zone,.quality-control,.qr-input-card,.qr-result,.compress-item {background:#111419;border:1px solid #ffffff18;border-radius:14px;box-shadow:inset 0 1px 0 #ffffff04}
.upload-zone {border-style:dashed;border-color:#8faed448;min-height:260px;transition:background .25s,border-color .25s,box-shadow .25s}
.upload-zone:hover,.upload-zone.drag {background:radial-gradient(ellipse at 50% 20%,#4284f624,transparent 75%),#151b25;border-color:#74a5f380;box-shadow:0 12px 36px #0003,0 0 22px #2a64c214}
.upload-icon {color:#b9cde9;font-size:36px}.upload-zone strong {font-weight:500}.upload-zone small {font-size:12px}
.quality-control {padding:22px;align-self:stretch;justify-content:center}
.quality-control label,.size-selector label,.frame-selector label,.qr-input-card>label,.qr-options label {font-size:12px;font-weight:500}
.quality-control output {font-weight:500;color:#dce8fa}
.size-btn,.frame-btn {background:#ffffff05;border-color:#ffffff20;color:#a8b4c7;border-radius:18px;font-size:11px;font-weight:400}
.size-btn.active,.frame-btn.active {background:#e8edf5;color:#1a2230;border-color:#e8edf5}
.pure-frame-row {background:#ffffff04;color:#b9cde9;border-color:#8faed450;font-size:12px !important;font-weight:500 !important}
.pure-frame-row:hover {background:#ffffff09}.pure-frame-row:has(input:checked) {background:#273b55;color:#e5edfa;border-color:#8faed4;box-shadow:0 0 0 2px #8faed415}
.qr-url-row input {background:#ffffff06;color:#edf2fa;border-color:#ffffff20;border-radius:22px;font-size:12px}
.qr-swatch.active {border-color:#b9cde9;box-shadow:0 0 0 2px #8faed430}
.batch-divider {background:linear-gradient(115deg,#273244,#171d27);border:1px solid #ffffff20;box-shadow:inset 0 1px 0 #ffffff09;color:#dce5f2}
.batch-num {font-size:13px;font-weight:500}.batch-time,.batch-count {font-size:11px}.batch-mode {font-size:10px}
.batch-actions .btn {background:#e8edf5;color:#1a2230;font-weight:500}.batch-actions .btn-ghost {background:#ffffff07;color:#dce5f2;border-color:#ffffff20}
.btn-dark:hover {background:#fff;color:#1a2230;border-color:#fff}.btn-dark:disabled {background:#e8edf5;border-color:#e8edf5;color:#1a2230;opacity:.35}
.item-name {font-size:13px;font-weight:500}.size-result,.size-saved {font-weight:500}.item-size-row {flex-wrap:wrap;gap:8px}
.compress-foot {font-size:11px;background:#090b0e;border-color:#ffffff12}
@media(max-width:760px) {.topbar {height:auto;min-height:58px;flex-wrap:wrap;padding:12px 18px;gap:8px}.total-stats {width:100%;justify-content:center;font-size:10px;padding:6px 10px}.compress-page {padding-top:32px}.compress-intro {gap:22px}.compress-intro h1 {font-size:52px}.compress-metrics .metric strong {font-size:23px}.mode-tab {padding:9px 12px}.upload-zone {min-height:220px}.batch-divider {flex-wrap:wrap}.batch-actions {margin-left:auto}.compress-upload {gap:16px}}
@media(prefers-reduced-motion:reduce) {.upload-zone {transition:none}}