/* ============================================================
   澄图 ChengTu · CT Component Library
   合同 §11 · 统一组件，供首页与四个工具页复用
   命名前缀 ct- ，与旧 styles.css 共存（本文件后加载，负责覆盖）
   ============================================================ */

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--ct-radius-pill);
  font-size: 16px; font-weight: 650; letter-spacing: .01em;
  transition: transform var(--ct-dur-fast) var(--ct-ease),
              background var(--ct-dur) var(--ct-ease),
              box-shadow var(--ct-dur) var(--ct-ease),
              border-color var(--ct-dur) var(--ct-ease);
  user-select: none; white-space: nowrap;
}
@media (max-width: 599px) { .ct-btn { min-height: 54px; } }

.ct-btn svg { width: 20px; height: 20px; flex: none; }

/* 主按钮：深色胶囊 + 白字 + 右箭头（合同 4.3） */
.ct-btn--primary { background: var(--ct-surface-ink); color: var(--ct-on-ink); }
.ct-btn--primary:hover { background: #26272D; }
.ct-btn--primary:active { transform: scale(.975); }

/* 强调按钮：唯一蓝色实心，用于关键操作 */
.ct-btn--accent { background: var(--ct-accent); color: #fff; }
.ct-btn--accent:hover { background: var(--ct-accent-hover); }
.ct-btn--accent:active { transform: scale(.975); }

/* 次级按钮 */
.ct-btn--secondary {
  background: var(--ct-surface); color: var(--ct-ink);
  border-color: var(--ct-border-strong); box-shadow: var(--ct-shadow-soft);
}
.ct-btn--secondary:hover { border-color: var(--ct-accent); color: var(--ct-accent); }

/* 幽灵按钮 */
.ct-btn--ghost { background: transparent; color: var(--ct-text-secondary); padding: 0 14px; }
.ct-btn--ghost:hover { background: var(--ct-surface-soft); color: var(--ct-ink); }

/* 危险操作 */
.ct-btn--danger { color: var(--ct-danger); background: var(--ct-danger-soft); }

.ct-btn--block { width: 100%; }

/* Disabled 不能只靠颜色（合同 11.1 / 13） */
.ct-btn:disabled,
.ct-btn[aria-disabled="true"] {
  background: var(--ct-surface-muted);
  color: var(--ct-text-tertiary);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.ct-btn:disabled::after { content: ""; }

/* Loading 态：文字保留，追加转圈，pointer-events 关闭 */
.ct-btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.ct-btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; animation: ct-spin .7s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* 成功态（短暂反馈） */
.ct-btn.is-success { background: var(--ct-success); color: #fff; }

/* Icon button */
.ct-icon-btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ct-radius-pill);
  background: rgba(255,255,255,.86);
  border: 1px solid var(--ct-border);
  color: var(--ct-text-secondary);
  box-shadow: var(--ct-shadow-soft);
  transition: transform var(--ct-dur-fast) var(--ct-ease), color var(--ct-dur) var(--ct-ease);
  backdrop-filter: blur(8px);
}
.ct-icon-btn:hover { color: var(--ct-ink); }
.ct-icon-btn:active { transform: scale(.94); }
.ct-icon-btn svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------
   Cards / surfaces
   ------------------------------------------------------------ */
.ct-card {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-soft);
}
.ct-card--flat { box-shadow: none; }
.ct-card--pad { padding: var(--ct-space-5); }
.ct-panel {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-lg);
  padding: var(--ct-space-5);
  box-shadow: var(--ct-shadow-soft);
}

/* 面板标题（工具页通用） */
.ct-panel-head {
  display: flex; align-items: center; gap: var(--ct-space-2);
  font-size: 15px; font-weight: 700; color: var(--ct-heading);
  margin-bottom: var(--ct-space-4);
}
.ct-panel-head svg { width: 17px; height: 17px; color: var(--ct-accent); }
.ct-panel-head .ct-grow { flex: 1; }

/* ------------------------------------------------------------
   Segmented control（分段选择）
   ------------------------------------------------------------ */
.ct-seg {
  display: flex; gap: 4px; padding: 4px;
  background: var(--ct-surface-soft);
  border-radius: var(--ct-radius-pill);
  border: 1px solid var(--ct-border);
}
.ct-seg > button {
  flex: 1; min-height: 40px; border: 0; border-radius: var(--ct-radius-pill);
  background: transparent; color: var(--ct-text-secondary);
  font-size: 14px; font-weight: 600;
  transition: background var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease);
}
.ct-seg > button.is-active,
.ct-seg > button.active {
  background: var(--ct-surface); color: var(--ct-ink);
  box-shadow: var(--ct-shadow-soft);
}

/* ------------------------------------------------------------
   Slider（合同 11.2）
   ------------------------------------------------------------ */
.ct-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 32px; background: transparent; cursor: pointer;
}
.ct-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--ct-surface-muted);
}
.ct-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ct-accent);
  box-shadow: 0 2px 8px rgba(20,31,55,.18);
}
.ct-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ct-surface-muted); }
.ct-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 2px solid var(--ct-accent); box-shadow: 0 2px 8px rgba(20,31,55,.18);
}
.ct-slider:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 4px; }
.ct-slider:disabled::-webkit-slider-thumb { border-color: var(--ct-border-strong); }

/* 数值输出 */
.ct-output {
  min-width: 56px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 15px; color: var(--ct-accent);
}

/* ------------------------------------------------------------
   Chips / presets
   ------------------------------------------------------------ */
.ct-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 14px;
  border-radius: var(--ct-radius-pill);
  background: var(--ct-surface); border: 1px solid var(--ct-border-strong);
  color: var(--ct-text); font-size: 14px; font-weight: 600;
  transition: border-color var(--ct-dur) var(--ct-ease), color var(--ct-dur) var(--ct-ease),
              background var(--ct-dur) var(--ct-ease);
}
.ct-chip:hover { border-color: var(--ct-accent); color: var(--ct-accent); }
.ct-chip.is-active, .ct-chip.active {
  background: var(--ct-accent-soft); border-color: var(--ct-accent); color: var(--ct-accent);
}

/* ------------------------------------------------------------
   Status badge
   ------------------------------------------------------------ */
.ct-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px; border-radius: var(--ct-radius-pill);
  font-size: 12px; font-weight: 650; letter-spacing: .01em;
  background: var(--ct-surface-soft); color: var(--ct-text-secondary);
}
.ct-badge--accent { background: var(--ct-accent-soft); color: var(--ct-accent); }
.ct-badge--success { background: var(--ct-success-soft); color: var(--ct-success); }
.ct-badge--danger { background: var(--ct-danger-soft); color: var(--ct-danger); }
.ct-badge--warn { background: var(--ct-warning-soft); color: var(--ct-warning); }
.ct-badge svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------
   Progress（合同 13.7：需可访问状态）
   ------------------------------------------------------------ */
.ct-progress { display: flex; flex-direction: column; gap: 10px; }
.ct-progress__bar {
  height: 8px; border-radius: 999px; background: var(--ct-surface-muted); overflow: hidden;
}
.ct-progress__bar > i {
  display: block; height: 100%; width: 0%;
  background: var(--ct-accent); border-radius: inherit;
  transition: width var(--ct-dur-slow) var(--ct-ease);
}
.ct-progress__txt { font-size: 13px; color: var(--ct-text-secondary); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   File picker / upload（合同 11.3）
   ------------------------------------------------------------ */
.ct-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; cursor: pointer;
  padding: var(--ct-space-10) var(--ct-space-5);
  border: 1.5px dashed var(--ct-border-strong);
  border-radius: var(--ct-radius-lg);
  background: var(--ct-surface);
  color: var(--ct-text-secondary);
  transition: border-color var(--ct-dur) var(--ct-ease), background var(--ct-dur) var(--ct-ease);
}
.ct-drop:hover, .ct-drop.drag { border-color: var(--ct-accent); background: var(--ct-accent-soft); }
.ct-drop__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ct-accent-soft); color: var(--ct-accent);
}
.ct-drop__icon svg { width: 26px; height: 26px; }
.ct-drop__main { font-size: 16px; font-weight: 650; color: var(--ct-heading); }
.ct-drop__sub { font-size: 13px; color: var(--ct-text-secondary); }

/* ------------------------------------------------------------
   Filmstrip（横向缩略图条）
   ------------------------------------------------------------ */
.ct-filmstrip { display: flex; flex-direction: column; gap: 10px; }
.ct-filmstrip__track {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px;
  scroll-snap-type: x proximity;
}
.ct-filmstrip__track::-webkit-scrollbar { height: 0; }
.ct-filmstrip__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ct-text-secondary); }

/* ------------------------------------------------------------
   Before / After（合同 5.7 / 11.4）
   ------------------------------------------------------------ */
.ct-ba {
  position: relative; overflow: hidden; border-radius: var(--ct-radius-md);
  background: var(--ct-surface-muted); touch-action: none; --p: 50%;
  aspect-ratio: 3 / 2;
}
.ct-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-ba__after { clip-path: inset(0 0 0 var(--p)); }
.ct-ba__base { clip-path: none; }
.ct-ba__div {
  position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; border: 0;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); transform: translateX(-1px);
}
.ct-ba__handle {
  position: absolute; top: 50%; left: var(--p); transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; box-shadow: var(--ct-shadow-floating);
  display: flex; align-items: center; justify-content: center; gap: 1px;
  color: var(--ct-ink);
}
/* 两支箭头必须显式定尺寸：内联 <svg> 无 width/height 时会回落到 300×150 */
.ct-ba__handle svg { width: 13px; height: 13px; flex: none; }
.ct-ba__label {
  position: absolute; bottom: 10px; padding: 4px 10px; border-radius: var(--ct-radius-pill);
  background: rgba(23,24,28,.72); color: #fff; font-size: 12px; font-weight: 600;
  backdrop-filter: blur(6px);
}
.ct-ba__label--l { left: 10px; }
.ct-ba__label--r { right: 10px; }

/* ------------------------------------------------------------
   Empty / Error states
   ------------------------------------------------------------ */
.ct-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: var(--ct-space-12) var(--ct-space-6);
  color: var(--ct-text-secondary);
}
.ct-empty__icon {
  width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 50%; background: var(--ct-surface-soft); color: var(--ct-text-tertiary);
  margin-bottom: 4px;
}
.ct-empty__icon svg { width: 30px; height: 30px; }
.ct-empty__title { font-size: 16px; font-weight: 700; color: var(--ct-heading); }

.ct-error {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--ct-space-4); border-radius: var(--ct-radius-sm);
  background: var(--ct-danger-soft); color: var(--ct-danger); font-size: 14px;
}
.ct-error svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ct-error span { color: var(--ct-danger); }

/* ------------------------------------------------------------
   Modal（合同 11.5：点击关闭 / Esc / 焦点管理）
   ------------------------------------------------------------ */
.ct-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: var(--ct-space-5);
  background: rgba(17, 22, 34, .42);
  backdrop-filter: blur(3px);
}
.ct-modal[hidden] { display: none; }
.ct-modal__card {
  width: 100%; max-width: 380px; background: var(--ct-surface);
  border-radius: var(--ct-radius-xl); padding: var(--ct-space-6);
  box-shadow: var(--ct-shadow-floating);
  animation: ct-pop var(--ct-dur-slow) var(--ct-ease);
}
@keyframes ct-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }

/* ------------------------------------------------------------
   Toast
   ------------------------------------------------------------ */
.ct-toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 200;
  max-width: min(92vw, 420px);
  padding: 12px 18px; border-radius: var(--ct-radius-pill);
  background: rgba(23, 24, 28, .94); color: #fff;
  font-size: 14px; font-weight: 600; text-align: center;
  box-shadow: var(--ct-shadow-floating);
  animation: ct-toast-in var(--ct-dur) var(--ct-ease);
}
@keyframes ct-toast-in { from { transform: translate(-50%, 10px); opacity: 0; } }

/* ------------------------------------------------------------
   Result card（结果卡片，兼容旧动态类 .r-card / .dl）
   ------------------------------------------------------------ */
.r-card {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  overflow: hidden;
  box-shadow: var(--ct-shadow-soft);
}
.r-card .r-img { position: relative; background: var(--ct-surface-muted); }
.r-card .dl, .r-card .share-btn, .r-card .cmp-btn {
  border-radius: var(--ct-radius-pill);
  font-weight: 650;
}
.r-card .dl { background: var(--ct-ink); color: #fff; }

/* 缩略图条内的单张（兼容动态 .strip-item） */
.strip-item {
  position: relative; flex: none; width: 66px; height: 66px;
  border-radius: var(--ct-radius-sm); overflow: hidden;
  border: 2px solid transparent; background: var(--ct-surface-muted);
  scroll-snap-align: start; cursor: pointer;
  transition: border-color var(--ct-dur) var(--ct-ease);
}
.strip-item.active { border-color: var(--ct-accent); }
.strip-item img { width: 100%; height: 100%; object-fit: cover; }
.strip-item .del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(23,24,28,.72); color: #fff;
  font-size: 12px; line-height: 20px; text-align: center; border: 0;
}
.strip-item .idx {
  position: absolute; left: 3px; bottom: 3px;
  padding: 1px 6px; border-radius: var(--ct-radius-pill);
  background: rgba(23,24,28,.66); color: #fff; font-size: 10px;
}

/* ------------------------------------------------------------
   历史记录条目（兼容动态 .his-item）
   ------------------------------------------------------------ */
.his-item {
  display: flex; align-items: center; gap: var(--ct-space-3);
  padding: var(--ct-space-3); border-radius: var(--ct-radius-md);
  background: var(--ct-surface); border: 1px solid var(--ct-border);
}
.his-item .his-thumb {
  width: 52px; height: 52px; flex: none; border-radius: var(--ct-radius-sm);
  overflow: hidden; background: var(--ct-surface-muted);
}
.his-item .his-thumb img { width: 100%; height: 100%; object-fit: cover; }