/* COUPLE-COVER-FIT-20261101 v2 — 小克：大胶囊背景按框选的来画（JS 往 #couple-card 上写 data-cp-fit 和 --cp-photo-size / --cp-photo-pos）。
   两层背景都跟着走：::after 是清楚的那层；::before 第一层是糊开的那层（content-box，几何和清楚那层一样），
   第二层是往四边多铺 60px 的补边，照旧居中铺满（反正是糊的）。没框选过（没有 data-cp-fit）就是原来的居中铺满。 */
#couple-card[data-cp-fit]::after { background-size: var(--cp-photo-size, cover); background-position: var(--cp-photo-pos, center); }
#couple-card[data-cp-fit]::before { background-size: var(--cp-photo-size, cover), cover; background-position: var(--cp-photo-pos, center), center; }

/* ---------- 调整背景（像推特换背景图）：黑底整屏，中间一个大胶囊形状的框，框外的图压暗 ---------- */
.cf-crop { position: fixed; inset: 0; z-index: 1100; overflow: hidden; background: #000; color: #fff;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  opacity: 0; transition: opacity .2s ease; cursor: grab; }
.cf-crop.cf-in { opacity: 1; }
.cf-crop.cf-out { opacity: 0; pointer-events: none; }
.cf-crop:active { cursor: grabbing; }
.cf-img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; transform-origin: 0 0; will-change: transform;
  pointer-events: none; -webkit-user-drag: none; user-select: none; }
.cf-frame { position: absolute; pointer-events: none; border-radius: 30px;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .62), inset 0 0 0 1.5px rgba(255, 255, 255, .95); }
/* 拖的时候框里出三等分的细线，好对齐 */
.cf-frame i { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .2s ease;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255,255,255,.45) calc(33.333% - .5px), rgba(255,255,255,.45) calc(33.333% + .5px), transparent calc(33.333% + .5px),
      transparent calc(66.667% - .5px), rgba(255,255,255,.45) calc(66.667% - .5px), rgba(255,255,255,.45) calc(66.667% + .5px), transparent calc(66.667% + .5px)),
    linear-gradient(180deg, transparent calc(33.333% - .5px), rgba(255,255,255,.45) calc(33.333% - .5px), rgba(255,255,255,.45) calc(33.333% + .5px), transparent calc(33.333% + .5px),
      transparent calc(66.667% - .5px), rgba(255,255,255,.45) calc(66.667% - .5px), rgba(255,255,255,.45) calc(66.667% + .5px), transparent calc(66.667% + .5px)); }
.cf-frame.cf-grid i { opacity: 1; }

/* 上面：取消 · 调整背景 · 应用 */
.cf-top { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box; height: calc(env(safe-area-inset-top, 0px) + 56px); padding: env(safe-area-inset-top, 0px) 14px 0;
  cursor: default; touch-action: manipulation; }
.cf-top b { position: absolute; left: 50%; bottom: 17px; transform: translateX(-50%); font-size: 16px; font-weight: 600; letter-spacing: .02em; pointer-events: none; }
.cf-top button { height: 34px; margin: 0; padding: 0 6px; border: 0; background: none; color: #fff; font: inherit; font-size: 16px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .15s ease, transform .12s ease; }
.cf-top button:active { opacity: .6; }
.cf-top .cf-apply { padding: 0 18px; border-radius: 17px; background: #fff; color: #0f1419; font-weight: 700; }
.cf-top .cf-apply:active { transform: scale(.96); opacity: .85; }
.cf-top .cf-apply[aria-busy] { opacity: .6; pointer-events: none; }

/* 下面：提示 + 缩放滑杆 */
.cf-bottom { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); z-index: 1; transform: translateX(-50%);
  width: min(334px, calc(100vw - 48px)); cursor: default; touch-action: manipulation; }
.cf-hint { margin: 0 0 8px; font-size: 12.5px; line-height: 18px; text-align: center; color: rgba(255, 255, 255, .62); letter-spacing: .03em; min-height: 18px; }
.cf-zoom { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .7); }
.cf-zoom svg { flex: none; }
.cf-zoom input { --p: 0%; flex: 1; min-width: 0; height: 32px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; touch-action: pan-x; }
.cf-zoom input::-webkit-slider-runnable-track { height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.95) var(--p), rgba(255,255,255,.24) var(--p)); }
.cf-zoom input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10.5px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.cf-zoom input::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,.24); }
.cf-zoom input::-moz-range-progress { height: 3px; border-radius: 2px; background: rgba(255,255,255,.95); }
.cf-zoom input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) { .cf-crop, .cf-frame i { transition: none; } }