/* ===== 统一主题变量：苹果风玻璃质感 ===== */
:root {
  --bg-main: #f2f4f8;
  --bg-accent: #dbe7ff;
  --glass: rgba(255, 255, 255, 0.68);
  --line: rgba(255, 255, 255, 0.92);
  --text-main: #111827;
  --text-sub: #5c667a;
  --primary: #0a84ff;
  --primary-deep: #0066cc;
  --success: #2c9b5f;
  --danger: #d74848;
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-glass: 0 20px 60px rgba(27, 40, 78, 0.16);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "PingFang SC", "SF Pro SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text-main);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 28px;
  background:
    radial-gradient(1200px 700px at 10% -10%, #fff 0, transparent 62%),
    radial-gradient(900px 500px at 90% 0, var(--bg-accent) 0, transparent 55%),
    linear-gradient(160deg, #eef2f9 0, #e5ebf5 50%, #e7edf7 100%);
}

.app {
  width: min(1180px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--glass);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  overflow: hidden;
}
.hero {
  padding: 30px 34px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}
.brand { margin: 0; font-size: clamp(25px, 3.2vw, 38px); line-height: 1.15; }
.tagline { margin: 8px 0 0; color: var(--text-sub); font-size: clamp(14px, 1.6vw, 16px); }
.version-badge {
  margin: 10px 0 0;
  display: inline-block;
  width: fit-content;
  font-size: 12px;
  color: #1c4d95;
  background: rgba(10, 132, 255, 0.14);
  border: 1px solid rgba(10, 132, 255, 0.25);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
}

.content { display: grid; grid-template-columns: 360px 1fr; gap: 22px; padding: 24px; }
.panel, .preview-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-soft);
}
.panel { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.section-title { margin: 0; font-size: 18px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 13px; font-weight: 600; color: #2f3a4f; }
.upload-wrap { position: relative; overflow: hidden; border-radius: 12px; }
.upload-btn {
  width: 100%; border: none; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, #0e8fff, #1973e6);
  padding: 12px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: 0 10px 22px rgba(10, 132, 255, 0.35);
}
.upload-wrap input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hint { margin: 0; font-size: 12px; color: var(--text-sub); }
.range-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
input[type=range] { width: 100%; accent-color: var(--primary); }
.value-pill {
  min-width: 56px; text-align: center; border-radius: 999px;
  background: rgba(10, 132, 255, 0.12); color: var(--primary-deep);
  font-size: 12px; font-weight: 700; padding: 5px 10px;
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-item { border-radius: 12px; background: #f4f7fd; border: 1px solid #e6edf9; padding: 10px; }
.stat-label { display: block; font-size: 11px; color: var(--text-sub); margin-bottom: 4px; }
.stat-value { display: block; font-size: 14px; font-weight: 700; color: #1e2a3f; white-space: nowrap; }
.actions { display: grid; gap: 10px; }
.actions-2x2 { grid-template-columns: 1fr 1fr; }
.btn { border: none; border-radius: 12px; padding: 11px 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .18s ease, filter .18s ease, background .18s ease, color .18s ease; }
.btn.primary { background: linear-gradient(135deg, #0a84ff, #0066cc); color: #fff; box-shadow: 0 10px 22px rgba(0, 102, 204, 0.3); }
.btn.secondary { background: #eef4ff; color: #1957aa; border: 1px solid #d8e6ff; }
.share-btn {
  margin-top: -2px;
  background: linear-gradient(135deg, #f2f7ff, #e6f0ff);
  color: #184a92;
  border: 1px solid #cfe0ff;
}
.share-btn:hover { filter: brightness(0.98); }
.btn:disabled { cursor: not-allowed; opacity: 0.45; box-shadow: none; }
.status { margin: 0; min-height: 20px; font-size: 12px; font-weight: 600; }
.status.ok { color: var(--success); }
.status.err { color: var(--danger); }

.file-list {
  max-height: 190px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid #e2e9f8;
  background: #f8fbff;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.file-item {
  border: 1px solid #d8e5ff;
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.file-item.active { border-color: #8ab8ff; box-shadow: inset 0 0 0 1px #8ab8ff; }
.file-name { font-size: 12px; color: #2a3550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 11px; color: #5f6f8f; }
.file-switch {
  border: 1px solid #d9e5ff;
  background: #f1f6ff;
  color: #1f5aa9;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
}
.empty-list { margin: 8px; color: #92a0ba; font-size: 12px; text-align: center; }

.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.preview-card { padding: 14px; display: flex; flex-direction: column; min-height: 320px; }
.compare-card { grid-column: 1 / -1; }
.preview-title { margin: 0 0 10px; font-size: 15px; color: #25314a; }
.preview-box {
  border-radius: var(--radius-md);
  border: 1px dashed #d7e0f2;
  background: linear-gradient(145deg, #fafcff, #f2f6ff);
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 280px;
  flex: 1;
}
.preview-box img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.empty { color: #93a0bb; font-size: 13px; text-align: center; padding: 0 18px; line-height: 1.6; }

.compare-stage {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px dashed #d7e0f2;
  background: linear-gradient(145deg, #fafcff, #f2f6ff);
  overflow: hidden;
  min-height: 300px;
  display: grid;
  place-items: center;
}
.compare-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.compare-stage img:not([src]) {
  display: none;
}
.compare-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
}
.compare-overlay img {
  object-fit: contain;
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  width: 2px;
  background: rgba(10, 132, 255, 0.75);
  transform: translateX(-1px);
}
.compare-empty { position: relative; z-index: 2; }
.compare-range-wrap { margin-top: 10px; }

@media (max-width: 980px) {
  .content { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
  .compare-card { grid-column: auto; }
}