:root {
  --color-bg:      #faf6f1;
  --color-surface: #fffdf9;
  --color-border:  #eee4d8;
  --color-primary: #c2410c;
  --color-primary-h:#9a3412;
  --color-accent:  #b45309;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
  --color-text:    #1c1917;
  --color-muted:   #78716c;
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     16px;
  --shadow-sm:     0 1px 3px rgba(28,25,23,0.08);
  --shadow:        0 4px 16px rgba(28,25,23,0.08);
  --shadow-lg:     0 8px 32px rgba(28,25,23,0.12);
  --transition:    0.2s ease;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100vh; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.fa, .fas, .far, .fa-solid, .fa-regular, .fa-classic {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
}
.container, .app-shell { width: 100%; max-width: 430px; margin: 0 auto; padding: 0 16px 32px; }
a { color: var(--color-primary); text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* 顶栏 */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin: 0 -16px;
  background: #fff7ed;
  border-bottom: 1px solid var(--color-border);
}
.topbar-icon {
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.topbar h1 { font-size: 21px; font-weight: 700; line-height: 1.3; }
.topbar p { font-size: 12px; color: var(--color-muted); line-height: 1.4; }

/* 卡片 */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-top: 16px;
}

/* 上传区 */
.upload-card { padding: 0; overflow: hidden; }
.upload-inner {
  padding: 40px 16px; text-align: center;
  border: 2px dashed #d6c7b2; border-radius: var(--radius-lg);
  margin: 8px; color: var(--color-muted);
  transition: background var(--transition);
}
.upload-inner:active { background: #fdf3e7; }
.upload-inner i { font-size: 40px; color: var(--color-primary); margin-bottom: 10px; }
.upload-title { font-size: 17px; font-weight: 700; color: var(--color-text); }
.upload-sub { font-size: 13px; margin-top: 4px; }

/* 对比预览 */
.compare-wrap {
  position: relative; border-radius: var(--radius);
  overflow: hidden; background: #1c1917;
  touch-action: none;
}
.compare-wrap canvas { width: 100%; display: block; }
#afterCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.compare-tag {
  position: absolute; bottom: 10px;
  font-size: 11px; color: #fff; background: rgba(0,0,0,0.55);
  padding: 3px 10px; border-radius: 999px; pointer-events: none;
}
.tag-before { left: 10px; }
.tag-after { right: 10px; }
.compare-line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.5);
  pointer-events: none;
}
.compare-range-row {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-muted); margin: 12px 0 4px;
}
.compare-range-row i { font-size: 12px; flex-shrink: 0; }

/* 滑块通用 */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 32px; background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: #e7dccb;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-primary); border: 3px solid #fff;
  box-shadow: var(--shadow-sm); margin-top: -9px;
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #e7dccb; }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-primary); border: 3px solid #fff;
}

/* 按钮 */
.btn {
  border: none; border-radius: var(--radius);
  font-size: 16px; font-weight: 700;
  padding: 13px 24px; min-height: 48px;
  transition: transform var(--transition), background var(--transition);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(0.98); }
.btn-block { width: 100%; }
.btn-primary { background: var(--color-primary); color: #fff; margin-top: 12px; }
.btn-primary:hover { background: var(--color-primary-h); }
.btn-ghost {
  background: transparent; color: var(--color-primary);
  border: 1px solid var(--color-primary); margin-top: 10px;
}

/* 滑块区 */
.sliders { margin-top: 14px; border-top: 1px solid var(--color-border); padding-top: 6px; }
.slider-row label {
  display: flex; justify-content: space-between;
  font-size: 14px; font-weight: 700; color: var(--color-text);
}
.slider-row label span { color: var(--color-primary); font-weight: 700; }

/* 底部说明 */
.page-foot {
  margin-top: 20px; text-align: center;
  font-size: 12px; color: var(--color-muted); line-height: 1.6;
}
.page-foot i { margin-right: 4px; color: #b45309; }