/* 现代化商业级深浅色主题样式 */
:root {
  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #10b981;
  --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --box-bg: #f1f5f9;
}

[data-theme="dark"] {
  --bg-body: #090d16;
  --bg-card: #111827;
  --border-color: #1f2937;
  --border-hover: #374151;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --accent: #10b981;
  --card-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
  --box-bg: #1e293b;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background: var(--bg-body); color: var(--text-main); min-height: 100vh; display: flex; justify-content: center; padding: 2rem 1rem; transition: background 0.25s, color 0.25s; }

/* 容器扩展至 1120px，赋予预览窗口充分舒展空间 */
.app-container { width: 100%; max-width: 1120px; display: flex; flex-direction: column; gap: 2rem; }

/* 头部 */
.header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.brand { display: flex; align-items: center; gap: 0.85rem; }
.logo-box { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.brand h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.subtitle { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.2rem; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.theme-toggle-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); padding: 0.5rem 0.85rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.theme-toggle-btn:hover { border-color: var(--primary); color: var(--primary); }
.nav-btn { text-decoration: none; color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem 0.85rem; border-radius: 0.5rem; background: var(--bg-card); border: 1px solid var(--border-color); transition: all 0.2s; font-weight: 600; }
.nav-btn:hover { color: var(--text-main); border-color: var(--border-hover); }

/* 主卡片 */
.main-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 2.25rem; box-shadow: var(--card-shadow); transition: background 0.25s, border-color 0.25s; }

/* 拖拽上传 */
.drop-zone { border: 2px dashed var(--border-hover); border-radius: 1rem; padding: 3.5rem 2rem; text-align: center; cursor: pointer; transition: all 0.25s ease; background: var(--box-bg); }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--primary); background: rgba(37, 99, 235, 0.05); }
.drop-icon-wrapper { width: 68px; height: 68px; border-radius: 50%; background: rgba(37, 99, 235, 0.1); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.drop-icon-svg { width: 34px; height: 34px; }
.drop-zone h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.4rem; }
.drop-hint { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 2rem; }
.btn-select { background: var(--primary); color: #fff; border: none; padding: 0.5rem 1.4rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.btn-select:hover { background: var(--primary-hover); }

.security-badges { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid var(--border-color); padding-top: 1.5rem; }
.badge-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-muted); }

/* 工作区与对比视口 */
.file-summary-bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--box-bg); border-radius: 0.75rem; border: 1px solid var(--border-color); margin-bottom: 1.75rem; }
.file-meta { display: flex; align-items: center; gap: 0.75rem; }
.file-type-tag { background: #ef4444; color: #fff; font-weight: 800; font-size: 0.75rem; padding: 0.25rem 0.55rem; border-radius: 0.35rem; }
.file-meta h3 { font-size: 0.98rem; font-weight: 700; }
.file-meta p { font-size: 0.8rem; color: var(--text-muted); }
.btn-outline { background: transparent; border: 1px solid var(--border-hover); color: var(--text-muted); padding: 0.4rem 0.85rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.btn-outline:hover { color: var(--text-main); border-color: var(--text-main); }

.preview-section { display: grid; grid-template-columns: 360px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 960px) { .preview-section { grid-template-columns: 1fr; } }

.controls-column h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-main); }
.preset-modes { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.5rem; }
.preset-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--border-color); border-radius: 0.75rem; cursor: pointer; transition: all 0.2s; background: var(--box-bg); }
.preset-card:hover { border-color: var(--border-hover); }
.preset-card.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.08); }
.preset-card input { margin-top: 0.25rem; accent-color: var(--primary); }
.preset-meta { display: flex; flex-direction: column; }
.preset-title { font-size: 0.88rem; font-weight: 700; color: var(--text-main); }
.preset-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }

.slider-group { background: var(--box-bg); border: 1px solid var(--border-color); padding: 1rem; border-radius: 0.75rem; margin-bottom: 1.5rem; }
.slider-header { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.6rem; }
.slider-val { color: var(--primary); font-weight: 800; font-family: monospace; }
.custom-range { width: 100%; accent-color: var(--primary); cursor: pointer; }
.slider-ticks { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.35rem; }

.btn-compress-all { width: 100%; background: var(--primary); color: #fff; border: none; padding: 0.95rem; border-radius: 0.75rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.btn-compress-all:hover { background: var(--primary-hover); }

/* 右侧画质比对 */
.preview-column { background: var(--box-bg); border: 1px solid var(--border-color); border-radius: 0.85rem; padding: 1.25rem; }
.preview-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.75rem; }
.preview-header h4 { font-size: 0.95rem; font-weight: 700; }
.preview-subtip { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

.preview-actions { display: flex; align-items: center; gap: 0.75rem; }
.btn-fullscreen { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--primary); padding: 0.35rem 0.75rem; border-radius: 0.45rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.btn-fullscreen:hover { background: var(--primary); color: #fff; }
.preview-badge { font-size: 0.75rem; color: var(--accent); font-weight: 600; }

.comparison-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 680px) { .comparison-container { grid-template-columns: 1fr; } }

.comparison-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.65rem; overflow: hidden; display: flex; flex-direction: column; }
.box-tag { font-size: 0.75rem; font-weight: 700; padding: 0.45rem 0.75rem; text-align: center; }
.box-tag.original { background: #e2e8f0; color: #475569; }
[data-theme="dark"] .box-tag.original { background: #1e293b; color: #94a3b8; }
.box-tag.compressed { background: rgba(37, 99, 235, 0.15); color: var(--primary); }

/* 预览视口大幅增高至 420px，支持舒适的大图阅读 */
.canvas-wrapper { width: 100%; height: 420px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: #94a3b812; cursor: crosshair; }
.canvas-wrapper canvas { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 12px rgba(0,0,0,0.08); pointer-events: none; }

/* 鼠标悬停局部 3x 细节放大镜 Lens */
.magnifier-lens {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  pointer-events: none;
  display: none;
  overflow: hidden;
  z-index: 50;
  background: var(--bg-card);
  transform: translate(-50%, -50%);
}
.magnifier-lens canvas { width: 100% !important; height: 100% !important; display: block; border-radius: 50%; }
.lens-tag {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.size-hint { font-size: 0.75rem; color: var(--text-muted); text-align: center; padding: 0.5rem; font-weight: 600; border-top: 1px solid var(--border-color); }
.size-hint.new { color: var(--accent); }
.preview-tip { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.85rem; }

/* 进度与结果 */
.progress-panel { text-align: center; padding: 2.5rem 1rem; }
.loading-spinner { width: 48px; height: 48px; border: 4px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; margin: 0 auto 1.25rem; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-sub { font-size: 0.85rem; color: var(--text-muted); margin: 0.35rem 0 1.5rem; }
.progress-bar { background: var(--box-bg); height: 10px; border-radius: 9999px; overflow: hidden; margin-bottom: 0.5rem; border: 1px solid var(--border-color); }
.progress-fill { background: linear-gradient(90deg, var(--primary), var(--accent)); height: 100%; transition: width 0.3s; }
.progress-number { font-family: monospace; font-size: 0.9rem; color: var(--primary); font-weight: 700; }

.result-panel { text-align: center; padding: 1.5rem 0; }
.success-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(16, 185, 129, 0.15); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 1rem; font-weight: 800; }
.result-panel h2 { font-size: 1.35rem; margin-bottom: 1.75rem; }
.metrics-card { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.metric { background: var(--box-bg); border: 1px solid var(--border-color); padding: 1rem 1.75rem; border-radius: 0.75rem; display: flex; flex-direction: column; }
.metric.highlight { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.08); }
.m-title { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.m-val { font-size: 1.45rem; font-weight: 800; font-family: monospace; }
.m-val.old { color: var(--text-muted); text-decoration: line-through; }
.m-val.save { color: var(--accent); }
.m-arrow { font-size: 1.3rem; color: var(--text-muted); }

.result-btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-download { background: var(--accent); color: #fff; border: none; padding: 0.85rem 2rem; border-radius: 0.5rem; font-size: 1rem; font-weight: 700; cursor: pointer; }
.btn-download:hover { opacity: 0.95; }
.btn-again { background: var(--box-bg); color: var(--text-main); border: 1px solid var(--border-color); padding: 0.85rem 1.5rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; }
.btn-again:hover { border-color: var(--border-hover); }

/* 底部承诺 */
.guarantee-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.25rem; }
@media (max-width: 640px) { .guarantee-grid { grid-template-columns: 1fr; } }
.g-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1.25rem; box-shadow: var(--card-shadow); }
.g-item h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--text-main); }
.g-item p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }
.copyright { text-align: center; font-size: 0.8rem; color: var(--text-muted); }

/* 全屏模态弹窗 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  width: 95vw;
  max-width: 1300px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.modal-title-box h3 { font-size: 1.1rem; font-weight: 700; }
.modal-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  transition: all 0.2s;
}
.modal-close:hover { color: var(--text-main); background: var(--box-bg); }

.modal-body { flex: 1; overflow: auto; padding: 1.25rem; display: flex; justify-content: center; }
.modal-comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; width: 100%; height: 100%; }
@media (max-width: 768px) { .modal-comp-grid { grid-template-columns: 1fr; } }

.modal-box { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 0.75rem; overflow: hidden; background: var(--box-bg); }
.modal-tag { padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 700; background: #e2e8f0; color: #475569; text-align: center; }
[data-theme="dark"] .modal-tag { background: #1e293b; color: #94a3b8; }
.modal-tag.new { background: rgba(37, 99, 235, 0.15); color: var(--primary); }

.modal-canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 1rem; }
.modal-canvas-wrap canvas { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }