/* ============================================================
   合帧影像 FRAMETWO · studio.css
   账号 / 我的订单 / 后台工作台 / 登录守卫 共用样式
   依赖 styles.css 里的设计令牌（--bg --blue --navy ...）
============================================================ */

/* ---------- 0 · 登录守卫遮罩 ---------- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .02em;
}
.auth-gate.is-error { color: var(--pink-deep); }
.auth-gate__spin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--blue);
  animation: fts-gate-spin .8s linear infinite;
}
@keyframes fts-gate-spin { to { transform: rotate(360deg); } }

/* ---------- 1 · 导航里的账号入口 ---------- */

/* 未登录：右上角「登录」 */
.nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 2px solid #fff;
  background: #fff;
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-chip);
  transition: transform .2s var(--ease-out), color .2s, box-shadow .2s;
}
.nav-login:hover {
  color: var(--blue-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-float);
}
@media (max-width: 520px) {
  .nav-login { height: 34px; padding: 0 13px; font-size: 12.5px; }
}

.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 6px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--shadow-card);
  color: var(--navy);
  font-weight: 800;
  font-size: 13.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.nav-user:hover { transform: translateY(-1px); box-shadow: var(--shadow-float); }
.nav-user__ava {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--blue), var(--lav));
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  flex: none;
}
.nav-user__name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.nav-user__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-soft);
}
@media (max-width: 720px) {
  .nav-user__name { display: none; }
  .nav-user { padding: 0 8px; }
  .nav-user__dot { display: none; }
}

/* ---------- 2 · 页面骨架 ---------- */
.studio {
  min-height: calc(100vh - 80px);
  padding: 30px 0 80px;
  position: relative;
  isolation: isolate;
}
.studio::before,
.studio::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
}
.studio::before {
  width: 520px; height: 520px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, #CFE8FF, transparent 68%);
}
.studio::after {
  width: 460px; height: 460px;
  bottom: -200px; left: -140px;
  background: radial-gradient(circle, #FFE7EE, transparent 68%);
}
.studio__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.studio__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.studio__title small {
  display: block;
  font-family: var(--font-hand);
  font-size: 17px;
  font-weight: 400;
  color: var(--grey-light);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.studio__sub {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--grey);
  font-weight: 600;
}

/* ---------- 3 · 卡片 / 表单 ---------- */
.scard {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 26px;
}
.scard--pad-lg { padding: 34px; }

.sfield { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.sfield__label {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .02em;
}
.sfield__label .req { color: var(--pink-deep); }
.sfield__hint { font-size: 12px; color: var(--grey-light); font-weight: 600; }
.sfield__hint.is-ok { color: #1E9E86; font-weight: 800; }
.sfield input,
.sfield textarea,
.sfield select {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--card-tint);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-deep);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.sfield input::placeholder { color: var(--grey-faint); font-weight: 600; }
.sfield input:focus,
.sfield textarea:focus,
.sfield select:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px var(--blue-soft);
}

.sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s, background .2s, color .2s;
  white-space: nowrap;
}
.sbtn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.sbtn--primary {
  background: linear-gradient(150deg, var(--blue), var(--blue-deep));
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(10, 110, 212, .8);
}
.sbtn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(10, 110, 212, .9); }
.sbtn--soft {
  background: var(--blue-soft);
  color: var(--blue-deep);
}
.sbtn--soft:hover:not(:disabled) { background: #CFE9FF; transform: translateY(-1px); }
.sbtn--quiet {
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-card);
}
.sbtn--quiet:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-float); }
.sbtn--danger { background: var(--pink-soft); color: var(--pink-deep); }
.sbtn--danger:hover:not(:disabled) { background: #FFD7E2; }
.sbtn--block { width: 100%; }
.sbtn--sm { height: 36px; padding: 0 15px; font-size: 13px; }

.salert {
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 14px;
  display: none;
}
.salert.is-show { display: block; }
.salert--error { background: var(--pink-soft); color: var(--pink-deep); }
.salert--ok { background: var(--mint-soft); color: #1E9E86; }
.salert--info { background: var(--blue-mist); color: var(--blue-deep); }

/* ---------- 4 · 登录页 ---------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  position: relative;
  isolation: isolate;
}
.auth-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1000px 620px at 12% -8%, #D9ECFF 0%, transparent 62%),
    radial-gradient(900px 560px at 92% 108%, #FFE9F0 0%, transparent 60%),
    var(--bg);
}
.auth-box {
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.auth-box__side {
  padding: 46px 40px;
  background:
    radial-gradient(600px 420px at 100% 0%, rgba(255, 255, 255, .95), transparent 60%),
    linear-gradient(155deg, #E7F3FF 0%, #F3EEFF 55%, #FFEEF4 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
}
.auth-box__side h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.28;
  color: var(--navy-deep);
}
.auth-box__side h2 em {
  font-style: normal;
  color: var(--accent);
}
.auth-box__side p {
  margin: 0;
  font-size: 14px;
  color: var(--grey);
  font-weight: 600;
  line-height: 1.85;
}
.auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.auth-perks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.auth-perks .ico {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: var(--shadow-chip);
  color: var(--blue);
  font-size: 12px;
  margin-top: 1px;
}
.auth-box__main { padding: 40px 38px; display: flex; flex-direction: column; }
.auth-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 22px;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--card-soft);
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.auth-tab {
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  color: var(--grey-light);
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.auth-tab.is-on {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: var(--shadow-chip);
}
.auth-pane { display: none; }
.auth-pane.is-on { display: block; animation: fts-fade .28s var(--ease-out); }
@keyframes fts-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.auth-foot {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--grey-light);
  font-weight: 600;
  line-height: 1.75;
}
.auth-foot a { color: var(--blue-deep); font-weight: 800; text-decoration: none; }
.auth-back {
  margin-top: 16px;
  font-size: 13px;
  text-align: center;
  font-weight: 700;
}
.auth-back a { color: var(--grey); text-decoration: none; }
.auth-back a:hover { color: var(--blue-deep); }
@media (max-width: 860px) {
  .auth-box { grid-template-columns: 1fr; }
  .auth-box__side { display: none; }
  .auth-box__main { padding: 32px 24px; }
}

/* ---------- 5 · 状态徽标 ---------- */
.stag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.stag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.stag--wait { background: var(--gold-soft); color: #A67900; }
.stag--paid { background: var(--lav-soft); color: #6B4FD8; }
.stag--work { background: var(--blue-soft); color: var(--blue-deep); }
.stag--preview { background: #E4F3FF; color: #14739C; }
.stag--done { background: var(--mint-soft); color: #1E9E86; }
.stag--cancel { background: #EEF1F5; color: var(--grey-light); }

/* ---------- 6 · 我的订单 ---------- */
.me-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) { .me-grid { grid-template-columns: 1fr; } }

.me-card__ava {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--blue), var(--lav));
  color: #fff;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 14px;
  box-shadow: 0 12px 24px -12px rgba(60, 90, 200, .8);
}
.me-card__name { font-family: var(--font-display); font-size: 21px; color: var(--navy-deep); margin: 0 0 2px; }
.me-card__id { font-size: 12.5px; color: var(--grey-light); font-weight: 700; letter-spacing: .04em; }
.me-card__rows { margin: 18px 0 0; display: grid; gap: 10px; }
.me-card__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
}
.me-card__row dt { color: var(--grey-light); flex: none; }
.me-card__row dd { margin: 0; color: var(--navy-deep); text-align: right; word-break: break-all; }
.me-card__acts { margin-top: 20px; display: grid; gap: 9px; }

.me-draft {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  border-radius: var(--r-md);
  background: linear-gradient(120deg, var(--blue-mist), #F7F1FF);
  border: 1.5px dashed var(--line);
  margin-bottom: 18px;
}
.me-draft__ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: var(--shadow-chip);
  font-size: 18px;
}
.me-draft__body { flex: 1; min-width: 0; }
.me-draft__body strong { display: block; font-size: 14.5px; color: var(--navy-deep); }
.me-draft__body span { font-size: 12.5px; color: var(--grey); font-weight: 600; }

.order-list { display: grid; gap: 14px; }
.order-item {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  display: grid;
  gap: 12px;
  transition: box-shadow .2s, transform .2s;
}
.order-item:hover { box-shadow: var(--shadow-float); transform: translateY(-1px); }
.order-item__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-item__code {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: .01em;
}
.order-item__time { font-size: 12px; color: var(--grey-faint); font-weight: 700; margin-left: auto; }
.order-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.order-item__chip {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--card-soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--grey);
}
.order-item__msg {
  margin: 0;
  font-size: 13.5px;
  color: var(--grey);
  font-weight: 600;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.order-item__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 11px;
  border-top: 1px dashed var(--line-soft);
}
.order-item__money { font-size: 13px; font-weight: 800; color: var(--navy); }
.order-item__money b { color: var(--pink-deep); font-size: 16px; }

.steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 4px;
}
.steps__node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  font-size: 11px;
  font-weight: 800;
  color: var(--grey-faint);
}
.steps__node::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 50%;
  height: 2px;
  background: var(--line-soft);
}
.steps__node:first-child::before { display: none; }
.steps__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--line-soft);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--line-soft);
  position: relative;
  z-index: 1;
}
.steps__node.is-done { color: var(--blue-deep); }
.steps__node.is-done .steps__dot { background: var(--blue); box-shadow: 0 0 0 1.5px var(--blue); }
.steps__node.is-done::before { background: var(--blue); }
.steps__node.is-now { color: var(--pink-deep); }
.steps__node.is-now .steps__dot {
  background: var(--pink);
  box-shadow: 0 0 0 1.5px var(--pink), 0 0 0 6px rgba(255, 154, 177, .22);
}
.steps__node.is-now::before { background: var(--blue); }

.empty {
  text-align: center;
  padding: 54px 20px;
  color: var(--grey-light);
  font-weight: 700;
  font-size: 14px;
}
.empty__ico { font-size: 34px; display: block; margin-bottom: 10px; opacity: .7; }

/* ---------- 7 · 后台工作台 ---------- */
.adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.adm-stat {
  background: var(--card);
  border-radius: var(--r-md);
  padding: 17px 19px;
  box-shadow: var(--shadow-card);
}
.adm-stat__label { font-size: 12px; font-weight: 800; color: var(--grey-light); letter-spacing: .03em; }
.adm-stat__value {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.3;
  color: var(--navy-deep);
  margin-top: 2px;
}
.adm-stat__value small { font-size: 14px; color: var(--grey-light); margin-left: 3px; font-family: var(--font-body); }
.adm-stat--accent .adm-stat__value { color: var(--pink-deep); }

.adm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.adm-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-filter {
  height: 34px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  border: none;
  background: #fff;
  box-shadow: var(--shadow-card);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--grey);
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}
.adm-filter:hover { transform: translateY(-1px); }
.adm-filter.is-on { background: var(--blue); color: #fff; box-shadow: 0 8px 18px -8px rgba(10, 110, 212, .9); }
.adm-search {
  margin-left: auto;
  height: 36px;
  width: 210px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
}
.adm-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }

.adm-table {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.adm-row {
  display: grid;
  grid-template-columns: 132px 152px 1fr 118px 96px 118px;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .16s;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
}
.adm-row:last-child { border-bottom: none; }
.adm-row:hover { background: var(--card-tint); }
.adm-row--head {
  background: var(--card-soft);
  cursor: default;
  font-size: 12px;
  font-weight: 800;
  color: var(--grey-light);
  letter-spacing: .03em;
  padding-top: 12px;
  padding-bottom: 12px;
}
.adm-row--head:hover { background: var(--card-soft); }
.adm-row__code { font-family: var(--font-display); font-weight: 700; }
.adm-row__who strong { display: block; font-size: 13.5px; }
.adm-row__who span { font-size: 11.5px; color: var(--grey-light); font-weight: 700; }
.adm-row__spec { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--grey); }
.adm-row__money { font-weight: 800; color: var(--pink-deep); }
.adm-row__pay { font-size: 11.5px; font-weight: 800; }
.adm-row__pay.is-paid { color: #1E9E86; }
.adm-row__pay.is-unpaid { color: #C08A00; }
@media (max-width: 1024px) {
  .adm-row { grid-template-columns: 120px 1fr 100px; }
  .adm-row__who, .adm-row__spec, .adm-row > :nth-child(6) { display: none; }
  .adm-row--head > :nth-child(2),
  .adm-row--head > :nth-child(3),
  .adm-row--head > :nth-child(6) { display: none; }
}

/* 抽屉 */
.drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(51, 73, 93, .34);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s var(--ease-out);
}
.drawer-mask.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 8100;
  width: min(620px, 96vw);
  background: var(--bg);
  box-shadow: -18px 0 60px -24px rgba(51, 73, 93, .45);
  transform: translateX(102%);
  transition: transform .32s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: none; }
.drawer__head {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  box-shadow: 0 6px 18px -14px rgba(40, 135, 200, .6);
  flex: none;
}
.drawer__title { font-family: var(--font-display); font-size: 18px; color: var(--navy-deep); margin: 0; }
.drawer__close {
  margin-left: auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--card-soft);
  color: var(--grey);
  font-size: 17px;
  cursor: pointer;
  flex: none;
}
.drawer__close:hover { background: var(--pink-soft); color: var(--pink-deep); }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; display: grid; gap: 16px; }
.drawer__foot {
  flex: none;
  padding: 14px 24px;
  background: #fff;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: 0 -6px 18px -14px rgba(40, 135, 200, .6);
}

.dsec {
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}
.dsec__title {
  font-size: 12px;
  font-weight: 800;
  color: var(--grey-light);
  letter-spacing: .06em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.dkv { display: grid; gap: 8px; }
.dkv__row { display: flex; gap: 12px; font-size: 13px; font-weight: 700; }
.dkv__row dt { flex: none; width: 76px; color: var(--grey-light); }
.dkv__row dd { margin: 0; color: var(--navy-deep); word-break: break-word; }
.dmsg {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--blue-mist);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.85;
  color: var(--navy-deep);
  white-space: pre-wrap;
}
.dphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.dphoto {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--card-soft);
  box-shadow: var(--shadow-chip);
  cursor: zoom-in;
}
.dphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dphoto__idx {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.dstatus { display: flex; gap: 6px; flex-wrap: wrap; }
.dstatus button {
  height: 33px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--grey);
  cursor: pointer;
  transition: all .18s;
}
.dstatus button:hover { border-color: var(--blue); color: var(--blue-deep); }
.dstatus button.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(24, 32, 44, .9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px -30px #000; }
.lightbox__close {
  position: absolute;
  top: 22px; right: 26px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.adm-users { display: grid; gap: 10px; }
.adm-user {
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 15px 19px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 14px;
  align-items: center;
}
.adm-user__ava {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--blue), var(--lav));
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
.adm-user__name { font-size: 14.5px; font-weight: 800; color: var(--navy-deep); }
.adm-user__meta { font-size: 12px; color: var(--grey-light); font-weight: 700; margin-top: 2px; }
.adm-user__right { text-align: right; font-size: 12px; color: var(--grey); font-weight: 700; white-space: nowrap; }
.adm-user__right b { display: inline; font-family: var(--font-display); font-size: 18px; color: var(--blue-deep); margin-right: 2px; }

.toast-host {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 9600;
  display: grid;
  gap: 8px;
  justify-items: center;
  pointer-events: none;
}
.stoast {
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: rgba(51, 73, 93, .94);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--shadow-pop);
  animation: fts-toast .3s var(--ease-spring);
}
.stoast--err { background: rgba(200, 70, 105, .96); }
@keyframes fts-toast { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- 8 · 通用小工具 ---------- */
.is-hidden { display: none !important; }
.smuted { color: var(--grey-light); font-weight: 600; font-size: 12.5px; }
.srow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.srow--end { justify-content: flex-end; }
.sgrow { flex: 1; }
.ssep { height: 1px; background: var(--line-soft); margin: 16px 0; border: none; }

/* ---------- 9 · 下单成功弹窗里的「复制订单号」 ---------- */
.copy-code {
  margin-left: 8px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: #fff;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--blue-deep);
  cursor: pointer;
  vertical-align: middle;
  transition: background .16s, border-color .16s, color .16s;
}
.copy-code:hover { background: var(--blue-soft); border-color: var(--blue); }
.copy-code.is-done { background: var(--mint-soft); border-color: var(--mint); color: #1E9E86; }

/* ============================================================
   v3「双线版」· 首页新组件
   ------------------------------------------------------------
   改版原则：把糖果色/装饰图形全部撤掉，让视频和照片成为
   页面上唯一鲜艳的东西。所有新结构都在这里定义，
   styles.css 只负责基础排版与按钮，互不干扰。
============================================================ */

/* ---------- 0 · 全局底色覆盖：去掉四角彩色光斑与点阵 ---------- */
body::before {
  background:
    radial-gradient(60% 44% at 50% 0%, #FFFFFF 0%, rgba(255,255,255,0) 68%),
    radial-gradient(48% 40% at 92% 96%, #F0E7DA 0%, rgba(240,231,218,0) 66%),
    linear-gradient(180deg, #F8F5F0 0%, #F6F3EE 46%, #F2EDE4 100%);
}
body::after { display: none; }

:focus-visible { outline-color: rgba(166, 75, 42, .5); }

/* ---------- 1 · 首屏 ---------- */
.hero { padding: 18px 14px 0; }

.hero__card--v3 {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 44px;
  align-items: center;
  padding: 58px 48px 62px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 60% at 96% 4%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, #FDFBF7 0%, #F7F3EC 100%);
  box-shadow: 0 22px 48px -28px rgba(62, 46, 28, .30);
}
.hero__card--v3::before { display: none; }

.hero__card--v3 .hero__line--zh {
  font-weight: 800;
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: -.03em;
}
.hero__card--v3 .hero__line--en {
  color: var(--accent);
  text-shadow: none;
  font-size: clamp(38px, 5.6vw, 68px);
}
.hero__card--v3 .hero__sub {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--grey);
  line-height: 1.9;
}
.hero__card--v3 .hero__badge {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  font-size: 12px;
  padding: 7px 14px;
  margin-bottom: 22px;
}
.hero__card--v3 .hero__badge-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(166, 75, 42, .14);
}
.hero__card--v3 .hero__trust {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--grey-light);
}
.hero__card--v3 .tick { background: var(--accent-soft); }

/* 视频框 */
.hfilm { margin: 0; }
.hfilm__frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #14161A;
  box-shadow: 0 18px 42px -20px rgba(30, 22, 14, .55);
  aspect-ratio: 16 / 9;
}
.hfilm__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hfilm__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  border-radius: 14px;
}
.hfilm__cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grey-light);
  letter-spacing: .01em;
}
.hfilm__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* ---------- 2 · 六个场景 ---------- */
.scenes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.scene {
  position: relative;
  display: block;
  padding: 26px 24px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s;
}
.scene:hover {
  transform: translateY(-3px);
  border-color: #D6CCBC;
  box-shadow: var(--shadow-float);
}
.scene__no {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #C0B7A8;
  margin-bottom: 12px;
}
.scene__t {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 8px;
  color: var(--navy-deep);
}
.scene__d {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--grey);
  padding-right: 16px;
}
.scene__go {
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #C9C0B1;
  transition: color .2s, transform .2s;
}
.scene:hover .scene__go { color: var(--accent); transform: translate(2px, -2px); }

/* ---------- 3 · 两支成片 ---------- */
.section--films { background: #FBF9F5; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.films {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.film {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}
.film__poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: #14161A;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.film__poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out), opacity .3s;
}
.film__poster:hover img { transform: scale(1.03); }
.film__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy-deep);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
  transition: transform .22s var(--ease-out), background .2s;
  padding-left: 3px;
}
.film__poster:hover .film__play { transform: scale(1.08); background: #fff; }
.film__tag {
  position: absolute;
  left: 14px; top: 14px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(20, 22, 26, .62);
  color: #F4F0E9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  backdrop-filter: blur(6px);
}
.film__body { padding: 20px 22px 22px; }
.film__t {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 7px;
  letter-spacing: -.01em;
}
.film__d {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--grey);
  margin-bottom: 10px;
}
.film__meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--grey-light);
  letter-spacing: .02em;
}
.films__more {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-light);
  text-align: center;
}
.films__more strong { color: var(--accent); font-weight: 700; }

/* ---------- 4 · 两种做法 ---------- */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
}
.plan--hero {
  background: #17191C;
  border-color: #17191C;
  color: #F3EFE8;
  box-shadow: 0 22px 50px -26px rgba(20, 16, 10, .55);
}
.plan__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--grey-light);
  margin-bottom: 14px;
}
.plan--hero .plan__kicker { color: #C9A882; }
.plan__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.plan__price {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 6px 0 4px;
}
.plan__cur { font-size: 19px; font-weight: 700; vertical-align: 13px; margin-right: 1px; }
.plan__price small { font-size: 13px; font-weight: 600; color: var(--grey-light); letter-spacing: 0; }
.plan--hero .plan__price small { color: #9A958C; }
.plan__lead {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 20px;
}
.plan--hero .plan__lead { color: #D98863; }
.plan__list {
  flex: 1;
  margin-bottom: 22px;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}
.plan--hero .plan__list { border-top-color: rgba(255, 255, 255, .12); }
.plan__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 9px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--grey);
}
.plan--hero .plan__list li { color: #C8C3BA; }
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.plan--hero .plan__list li::before { background: #C9A882; }
.plan__list li.is-mute { color: var(--grey-light); }
.plan--hero .plan__list li.is-mute { color: #807B73; }
.plan__list li.is-mute::before { background: #D6CFC3; }
.plan__btn { width: 100%; justify-content: center; border-radius: 10px; }
.plan .btn--ghost {
  border: 1.5px solid #17191C;
  box-shadow: none;
  font-weight: 700;
  color: #17191C;
}
.plan .btn--ghost:hover { background: #17191C; color: #F3EFE8; }
.btn--blue.plan__btn { background: #F3EFE8; color: #17191C; border-color: #F3EFE8; }
.btn--blue.plan__btn:hover { background: #fff; }
.btn--blue.plan__btn .btn__disc { background: #17191C; color: #F3EFE8; }
.plans__note {
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--grey-light);
  text-align: center;
}

/* ---------- 5 · 怎么做 ---------- */
.steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.step3 {
  padding: 24px 24px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
}
.step3__no {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #C9BCA6;
  line-height: 1;
  margin-bottom: 14px;
}
.step3__t { font-size: 15.5px; font-weight: 800; margin-bottom: 7px; }
.step3__d { font-size: 13px; font-weight: 500; line-height: 1.75; color: var(--grey); }

.shotwall__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #D6CCBC transparent;
}
.shotwall__track::-webkit-scrollbar { height: 6px; }
.shotwall__track::-webkit-scrollbar-thumb { background: #D6CCBC; border-radius: 3px; }
.shotwall__track img {
  flex: none;
  width: 268px;
  height: auto;
  border-radius: 8px;
  scroll-snap-align: start;
  background: #EDE7DD;
  border: 1px solid var(--line-soft);
}
.shotwall__cap {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-light);
}

/* ---------- 6 · FAQ ---------- */
.faqv3 {
  border-top: 1px solid var(--line);
  max-width: 860px;
}
.qa {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy-deep);
  transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--ease-out);
  opacity: .45;
}
.qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa__body {
  padding: 0 44px 22px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  color: var(--grey);
}

/* ---------- 7 · 加微信 ---------- */
.section--contact { padding-bottom: 84px; }
.contactcard {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
  padding: 44px 48px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(150deg, #FDFBF7 0%, #F4EEE3 100%);
}
.contactcard__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 12px;
}
.contactcard__t {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.contactcard__d {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  color: var(--grey);
  margin-bottom: 24px;
  max-width: 520px;
}
.wxline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 16px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.wxline__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--grey-light);
  letter-spacing: .06em;
}
.wxline__id {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--navy-deep);
  padding: 0;
}
.wxline__copy {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--accent-soft);
  letter-spacing: .04em;
}
.wxline__id:hover .wxline__copy { background: #EEDCCF; }
.wxline__id.is-done .wxline__copy { background: var(--accent); color: #fff; }
.contactcard__list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey);
}
.contactcard__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #C9BFB0;
}
.contactcard__qr img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  border: 1px solid var(--line);
}
.contactcard__qrnote {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
}
.contactcard__qrtip {
  margin-top: 5px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--grey-light);
}

/* ---------- 8 · 页脚 ---------- */
.foot {
  background: #17191C;
  color: #B9B4AC;
  padding: 44px 0 40px;
}
.foot__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 32px;
  align-items: center;
}
.foot__brand { display: flex; align-items: center; gap: 13px; }
.foot__badge {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: #F3EFE8;
  flex: none;
}
.foot__badge img { display: block; width: 68%; height: 68%; }
.foot__brand strong { color: #F3EFE8; font-size: 14px; letter-spacing: .02em; }
.foot__brand p { font-size: 12.5px; margin-top: 3px; color: #8A857D; }
.foot__links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; font-weight: 600; }
.foot__links a { transition: color .2s; }
.foot__links a:hover { color: #F3EFE8; }
.foot__meta { font-size: 11.5px; line-height: 1.9; color: #7E796F; text-align: right; }

/* ---------- 9 · 微信吸底 ---------- */
.dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.dock__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: #17191C;
  color: #F3EFE8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px -10px rgba(20, 16, 10, .6);
  transition: transform .2s var(--ease-out), background .2s;
}
.dock__btn:hover { transform: translateY(-2px); background: #0E1013; }
.dock__btn svg { color: #C9A882; }
.dock__panel {
  width: 224px;
  padding: 16px 18px 14px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
}
.dock__t { font-size: 14px; font-weight: 800; margin-bottom: 5px; }
.dock__d { font-size: 11.5px; line-height: 1.65; color: var(--grey-light); margin-bottom: 11px; }
.dock__copy {
  width: 100%;
  padding: 9px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  transition: background .2s;
}
.dock__copy:hover { background: var(--accent-deep); }

/* ---------- 10 · 视频弹窗 ---------- */
.filmdlg {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(860px, calc(100% - 32px));
  width: 100%;
}
.filmdlg::backdrop { background: rgba(16, 14, 11, .82); backdrop-filter: blur(4px); }
.filmdlg__inner {
  position: relative;
  background: #17191C;
  border-radius: 14px;
  padding: 16px;
  color: #F3EFE8;
}
.filmdlg__close {
  position: absolute;
  right: 10px; top: 10px;
  z-index: 2;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
.filmdlg__close:hover { background: rgba(255, 255, 255, .26); }
.filmdlg__title { font-size: 15px; font-weight: 800; padding: 4px 44px 12px 4px; }
.filmdlg__video {
  width: 100%;
  aspect-ratio: 854 / 480;
  border-radius: 8px;
  background: #000;
  display: block;
}
.filmdlg__note {
  margin-top: 10px;
  font-size: 12px;
  color: #8A857D;
  padding-left: 4px;
}

/* ---------- 11 · 响应式 ---------- */
@media (max-width: 1080px) {
  .scenes { grid-template-columns: repeat(2, 1fr); }
  .contactcard { grid-template-columns: 1fr 240px; gap: 28px; padding: 36px; }
}

@media (max-width: 920px) {
  .hero__card--v3 {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 30px 44px;
    border-radius: 20px;
  }
  .hero__card--v3 .hero__side { order: 2; }
  .hero__card--v3 .hero__line--zh { font-size: clamp(32px, 8vw, 44px); }
  .hero__card--v3 .hero__line--en { font-size: clamp(34px, 9vw, 48px); }
  .hero__scroll { display: none; }
  .films { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .steps3 { grid-template-columns: 1fr; gap: 10px; }
  .step3 { padding: 20px; display: grid; grid-template-columns: 46px 1fr; gap: 0 14px; align-items: start; }
  .step3__no { font-size: 22px; margin: 0; grid-row: 1 / 3; }
  .step3__t { grid-column: 2; }
  .step3__d { grid-column: 2; }
  .foot__inner { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .foot__meta { text-align: left; }
  .contactcard { grid-template-columns: 1fr; padding: 32px 26px; }
  .contactcard__qr { max-width: 220px; }
  .contactcard__t { font-size: 23px; }
}

@media (max-width: 720px) {
  .section { padding: 52px 0; }
  .container { width: calc(100% - 32px); }
  .scenes { grid-template-columns: 1fr; gap: 10px; }
  .scene { padding: 22px 20px 20px; }
  .scene__t { font-size: 16px; }
  .hero { padding: 12px 10px 0; }
  .hero__card--v3 { padding: 32px 22px 34px; gap: 24px; }
  .hero__card--v3 .hero__ctas { flex-direction: row; }
  .hero__card--v3 .hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .plan { padding: 24px 22px; }
  .plan__price { font-size: 36px; }
  .plan__cur { font-size: 17px; vertical-align: 10px; }
  .shotwall__track img { width: 220px; }
  .dock { right: 12px; bottom: 12px; }
  .dock__btn { padding: 11px 15px; font-size: 12.5px; }
  .dock__panel { width: 200px; }
  .qa summary { font-size: 14.5px; padding: 17px 38px 17px 0; }
  .qa__body { font-size: 13.5px; padding-right: 20px; }
  .foot { padding: 34px 0 92px; }
  .films__more { text-align: left; }
  .plans__note { text-align: left; }
}

@media (max-width: 420px) {
  .hero__card--v3 .hero__ctas { flex-direction: column; }
  .hero__card--v3 .hero__ctas .btn { width: 100%; }
  .wxline { width: 100%; justify-content: space-between; }
}

/* 吸底默认隐藏，滚过首屏才出现 */
.dock {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s;
}
.dock.is-on { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
  .dock__btn, .scene, .film__poster img { transition: none; }
}

/* ============================================================
   v3 · 订单页配色修正
   ------------------------------------------------------------
   order.html 沿用了 styles.css 里大量硬编码的亮蓝渐变，
   这里统一覆盖成新体系的「墨 + 暖米 + 赭石」，不改原文件。
============================================================ */

/* hidden 属性要压得住 display:flex 这类声明 */
[hidden] { display: none !important; }

/* 订单页顶部的粉色飘带不要了 */
.petals { display: none; }

/* 主按钮：蓝渐变 → 墨 */
.summary__pay,
.paybar__btn,
.dialog__pay,
.success__btn {
  background: #1A1D21;
  border-color: transparent;
  color: #F6F3EE;
  box-shadow: 0 12px 24px -14px rgba(24, 18, 12, .6);
}
.summary__pay:hover,
.paybar__btn:hover,
.dialog__pay:hover { background: #0E1013; box-shadow: 0 16px 30px -16px rgba(24, 18, 12, .65); }

/* 档位 / 选项的选中态 */
.tier-chip input:checked + span {
  border-color: #1A1D21;
  background: #1A1D21;
  color: #F6F3EE;
  box-shadow: 0 8px 16px -10px rgba(24, 18, 12, .55);
}
.tier-chip:hover span { background: #F7F3EC; border-color: #D8D0C2; }

/* 摘要卡：去掉蓝色径向 */
.summary {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.summary__deposit {
  border-radius: 12px;
  background: linear-gradient(150deg, #FBF7F0, #F4EDE2);
  border: 1px solid #EDE4D6;
}

/* 拖拽区：暖白 + 赭石虚线 */
.dropzone {
  border: 1.5px dashed #D6C7B4;
  background: #FAF7F1;
  color: var(--accent);
  border-radius: 14px;
}
.dropzone:hover,
.dropzone.is-over {
  border-color: var(--accent);
  background: #F7F1E8;
}

/* 面板卡片 */
.panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

/* 顶部三步进度：蓝 → 墨 */
.steps-mini__step.is-current .steps-mini__ico,
.steps-mini__step.is-done .steps-mini__ico {
  background: #1A1D21;
  border-color: #1A1D21;
  color: #F6F3EE;
}
.steps-mini__step.is-current .steps-mini__label-text { color: var(--navy-deep); }

/* 已选风格缩略图：SVG 插画 → 真实分镜帧 */
.still { background-size: cover; background-position: center; }
.still::before, .still::after { display: none; }
.still--japanese { background-image: url('img/frames/f11.jpg'); }
.still--cinema   { background-image: url('img/frames/f14.jpg'); }
.still--film     { background-image: url('img/frames/f8.jpg'); }
.still--birthday { background-image: url('img/frames/f3.jpg'); }
.still--timeline { background-image: url('img/frames/f0.jpg'); }
.still--japanese .still__caption,
.still--film .still__caption,
.still--birthday .still__caption,
.still--timeline .still__caption { color: rgba(255, 255, 255, .78); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* 风格弹窗里的缩略图同步 */
.style-grid__item .still { background-size: cover; background-position: center; }

/* 蓝色描边类容器（换风格弹窗等） */
.style-grid__item.is-current { border-color: #1A1D21; box-shadow: 0 0 0 2px #1A1D21; }

/* 已选风格卡片：蓝渐变 → 暖白 */
.pick {
  background: linear-gradient(150deg, #FBF8F2, #F5EFE5);
  border: 1px solid #EBE3D6;
  border-radius: 14px;
}
.pick__thumb { border-radius: 10px; }

/* 添加照片 chip */
.dropzone__chip {
  background: #1A1D21;
  border-color: transparent;
  color: #F6F3EE;
  box-shadow: 0 8px 16px -10px rgba(24, 18, 12, .5);
}

/* 加购项 / 单选卡片的选中态 */
.radio-card input:checked + span,
.addon input:checked + span {
  border-color: #1A1D21;
  background: #F7F3EC;
  box-shadow: 0 0 0 1.5px #1A1D21;
}

/* 顶部保存状态点 */
.autosave[data-state="saved"] .autosave__dot { background: #6E8A7D; }

/* 「没灵感？补一句」：紫渐变 → 暖米 + 赭石 */
.ai-polish {
  background: #F6EDE4;
  border-color: transparent;
  color: var(--accent);
  box-shadow: none;
}
.ai-polish:hover { background: #F0E2D6; filter: none; }

/* 场合 chip 选中态 */
.chip-radio input:checked + span {
  background: #1A1D21;
  border-color: #1A1D21;
  color: #F6F3EE;
}

/* ============================================================
   v3 · 移动端收尾
============================================================ */

/* 锚点跳转别被悬浮导航吃掉标题 */
section[id] { scroll-margin-top: 88px; }

@media (max-width: 720px) {
  /* 场景卡：从「三行大卡」压成「两行紧凑卡」，一屏能看全 6 个 */
  .scene {
    padding: 15px 16px 15px;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 2px 8px;
    align-items: start;
  }
  .scene__no { grid-row: 1 / 3; margin: 1px 0 0; font-size: 10.5px; letter-spacing: .1em; }
  .scene__t { grid-column: 2; font-size: 15px; margin-bottom: 3px; }
  .scene__d { grid-column: 2; font-size: 12.8px; line-height: 1.62; padding-right: 0; }
  .scene__go { display: none; }

  /* 价格卡按钮别把箭头挤掉 */
  .plan__btn { font-size: 14.5px; height: 48px; }
  .plan__btn .btn__disc { display: none; }
  .plan__btn .btn__play { display: none; }

  /* 吸底再小一号，少挡内容 */
  .dock__btn { padding: 9px 13px; font-size: 12px; gap: 6px; }
  .dock__btn svg { width: 13px; height: 13px; }
  .dock { right: 10px; bottom: 10px; }

  /* 首屏副文案收一行，让视频早点露出来 */
  .hero__card--v3 .hero__sub { font-size: 14.5px; line-height: 1.82; }
  .hero__card--v3 .hero__badge { margin-bottom: 16px; }
  .hero__card--v3 .hero__ctas { margin-bottom: 16px; gap: 9px; }
  .hero__card--v3 .btn { height: 48px; font-size: 14.5px; }
}

@media (max-width: 420px) {
  .plan__btn { font-size: 14px; }
}

/* ============================================================
   v4 · 12 种画风墙 + 单档定价
============================================================ */

.stylewall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.stylecard {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .24s var(--ease-out), box-shadow .24s, border-color .24s;
}
.stylecard:hover {
  transform: translateY(-4px);
  border-color: #D6CCBC;
  box-shadow: var(--shadow-float);
}
.stylecard:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.stylecard__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #14161A;
  overflow: hidden;
}
.stylecard__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s var(--ease-out);
}
.stylecard:hover .stylecard__frame img { transform: scale(1.045); }

.stylecard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy-deep);
  padding-left: 3px;
  opacity: 0;
  transform: scale(.86);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
  transition: opacity .22s, transform .22s var(--ease-out);
}
.stylecard:hover .stylecard__play,
.stylecard:focus-visible .stylecard__play {
  opacity: 1;
  transform: scale(1);
}

.stylecard__body {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 14px 15px;
}
.stylecard__no {
  flex: none;
  padding-top: 3px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #C0B7A8;
}
.stylecard__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stylecard__name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--navy-deep);
}
.stylecard__d {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--grey-light);
}

.stylewall__note {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-light);
}
.stylewall__note strong { color: var(--accent); font-weight: 700; }

/* 单档定价：居中一张卡 */
.plans--single {
  grid-template-columns: minmax(0, 600px);
  justify-content: center;
}
.plans--single .plan { padding: 38px 38px 34px; }
.plans--single .plan__price { font-size: 56px; }
.plans--single .plan__cur { font-size: 24px; vertical-align: 20px; }

/* 触屏没有 hover：播放按钮常显 */
@media (hover: none) {
  .stylecard__play { opacity: .9; transform: scale(.9); }
}

@media (max-width: 1080px) {
  .stylewall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .stylewall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stylecard__body { padding: 10px 11px 12px; gap: 7px; }
  .stylecard__no { font-size: 9.5px; padding-top: 2px; }
  .stylecard__name { font-size: 13.5px; }
  .stylecard__d { font-size: 10.5px; line-height: 1.45; }
  .stylecard__play { width: 36px; height: 36px; }
  .plans--single { grid-template-columns: minmax(0, 1fr); }
  .plans--single .plan { padding: 26px 22px 24px; }
  .plans--single .plan__price { font-size: 46px; }
  .plans--single .plan__cur { font-size: 20px; vertical-align: 15px; }
  .stylewall__note { margin-top: 18px; font-size: 12.5px; }
}

/* ============================================================
   v4 · 下单页：12 画风选择 + 单档提示
============================================================ */

.pick__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 已选画风卡里的价格一行（替代原来的两颗 tier chip） */
.tier-single-note {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #F7F3EC;
  border: 1px solid #EBE3D6;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
}
.tier-single-note strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.02em;
}

/* 换画风弹窗：12 格 → 4 列 */
.style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.style-grid__img {
  display: block;
  border-radius: 11px;
  overflow: hidden;
  background: #14161A;
  aspect-ratio: 16 / 9;
}
.style-grid__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.style-grid__item { padding: 6px; }
.style-grid__name { font-size: 11px; line-height: 1.3; }

@media (max-width: 560px) {
  .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .style-grid__name { font-size: 10px; }
  .tier-single-note { font-size: 12px; }
  .tier-single-note strong { font-size: 16px; }
}

/* ============================================================
   v6 · 三项表单 / 成片交付 / 无微信
============================================================ */

/* 「可选」小标 */
.panel__opt {
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F1ECE3;
  color: #8C8272;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 2px;
}

/* 「以照片为参考生成」说明条 */
.gen-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid #D9E9FA;
  background: linear-gradient(150deg, #F4FAFF, #EDF6FF);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.65;
  color: #4A6B87;
}
.gen-note strong { color: var(--blue-deep); font-weight: 800; }
.gen-note__ico {
  flex: none;
  margin-top: 1px;
  color: var(--blue);
  font-size: 14px;
}
.gen-note--soft {
  border-color: #EDE5D8;
  background: #FBF7F1;
  color: #7A6E5C;
}
.gen-note--soft .gen-note__ico { color: #C0A87E; }

/* 紧凑版上传区：图标 + 文字一行排开，两个上传区不至于占满屏 */
.dropzone--compact {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px 14px;
  padding: 20px 22px;
  border-radius: 16px;
  border-width: 2px;
  text-align: left;
}
.dropzone--compact .dropzone__icon { margin: 0; flex: none; }
.dropzone--compact .dropzone__title { font-size: 13.5px; }
.dropzone--compact .dropzone__sub {
  flex: 1 1 100%;
  padding-left: 44px;
  margin-top: -2px;
}
.dropzone--compact .dropzone__blob { width: 100px; height: 100px; right: -30px; top: -40px; }

/* 首页联系区改成单栏（没有二维码了） */
.contactcard--solo { grid-template-columns: minmax(0, 1fr); }
.contactcard__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---- 客户「我的订单」：成片区 ---- */
.deliver {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 14px 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed #DCD3C4;
  background: #FBF8F3;
}
.deliver--ready {
  border: 1px solid #CBE8DF;
  background: linear-gradient(150deg, #F2FBF8, #E9F7F2);
}
.deliver__ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  font-size: 17px;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .18);
}
.deliver__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.deliver__body strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy-deep);
}
.deliver__body span {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--grey-light);
  word-break: break-all;
}

/* ---- 后台：成片交付区 ---- */
.dfinal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px dashed #DED6C8;
  background: #FCFAF6;
}
.dfinal--ready {
  border: 1px solid #CFE8DF;
  background: linear-gradient(150deg, #F4FBF8, #ECF7F2);
}
.dfinal--empty { border-style: dashed; }
.dfinal__ico {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .16);
}
.dfinal__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.dfinal__body strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-deep);
  word-break: break-all;
}
.dfinal__body span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--grey-light);
  line-height: 1.5;
}

@media (max-width: 620px) {
  .deliver, .dfinal { flex-wrap: wrap; }
  .deliver__body, .dfinal__body { flex-basis: calc(100% - 50px); }
  .deliver .sbtn, .dfinal .sbtn { margin-left: 50px; }
  .contactcard__acts .btn { width: 100%; justify-content: center; }
}

/* 表单里的「可选」小标 */
.sfield__opt {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #F1ECE3;
  color: #8C8272;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 勾选框在白底上太淡，加深一点描边 */
.agree input { border-color: #C6BAA6; }
.agree input:hover { border-color: var(--blue); }
.agree input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* 下单入口卡：单栏后收窄居中，避免右侧大片空白 */
.contactcard--solo {
  max-width: 780px;
  margin: 0 auto;
}
.contactcard--solo .contactcard__d { max-width: 100%; }

/* ---- 窄屏导航：步骤条和保存指示挤不下就收起，避免整页被撑宽 ---- */
@media (max-width: 520px) {
  .is-order .steps-mini { display: none; }
  .is-order .autosave { display: none; }
  .is-order .nav__bar { padding-left: 14px; gap: 8px; }
}
/* 兜底：任何页面都不允许横向滚动 */
html, body { overflow-x: clip; }

/* 说明条里的文字整体作为一个 flex 项，避免逐段被拆成多列 */
.gen-note__text { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   v7 · 售后入口 + 售后弹窗
   ------------------------------------------------------------
   入口由 service.js 注入（右下角白色药丸），
   弹窗内是二维码 + 微信号 + 一键复制 + 常见售后事项。
   页面上任何 [data-svc-open] 元素都能唤出同一个弹窗。
============================================================ */

/* ---------- 右下角悬浮入口 ---------- */
.svc-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 10px 26px -12px rgba(62, 46, 28, .42),
    0 1px 0 rgba(255, 255, 255, .9) inset;
  color: var(--navy-deep);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  transition: transform .28s var(--ease-spring), box-shadow .28s, background .2s;
}
.svc-fab:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 16px 32px -14px rgba(62, 46, 28, .5);
}
.svc-fab:active { transform: translateY(0) scale(.97); }
.svc-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.svc-fab__ico {
  display: block;
  width: 19px;
  height: 19px;
  color: var(--accent);
  flex: none;
}
.svc-fab__ico svg { display: block; width: 100%; height: 100%; }
.svc-fab__txt { display: block; padding-top: 1px; }

/* ---------- 弹窗骨架 ---------- */
.svc-dlg {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  overflow-y: auto;
}
.svc-dlg__body {
  position: relative;
  padding: 30px 28px 24px;
}
.svc-dlg__head { padding-right: 34px; }
.svc-dlg__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-deep);
}
.svc-dlg__sub {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--grey);
}

/* ---------- 二维码 + 微信号 ---------- */
.svc-dlg__grid {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 20px;
}
.svc-qr {
  padding: 9px 9px 7px;
  border-radius: 16px;
  border: 2px dashed var(--line);
  background: var(--card-soft);
  text-align: center;
}
.svc-qr img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
}
.svc-qr figcaption {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--grey-light);
}
.svc-id { min-width: 0; }
.svc-id__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-faint);
}
.svc-id__value {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--navy-deep);
  word-break: break-all;
}
.svc-id__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  margin-top: 11px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--blue);
  color: #F6F3EE;
  font-size: 12.5px;
  font-weight: 700;
  transition: background .22s, transform .18s var(--ease-spring), color .22s;
}
.svc-id__copy:hover { background: var(--blue-deep); transform: translateY(-1px); }
.svc-id__copy:active { transform: translateY(0) scale(.98); }
.svc-id__copy.is-done {
  background: var(--mint);
  color: #fff;
}
.svc-id__copy-ico {
  display: block;
  width: 15px;
  height: 15px;
  flex: none;
  opacity: .9;
}
.svc-id__copy-ico svg { display: block; width: 100%; height: 100%; }
.svc-id__hint {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--grey-faint);
}

/* ---------- 常见售后事项 ---------- */
.svc-tips {
  display: grid;
  gap: 9px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--line-soft);
}
.svc-tips li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.62;
}
.svc-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
}
.svc-tips strong {
  display: block;
  font-weight: 800;
  color: var(--navy-deep);
}
.svc-tips span {
  display: block;
  font-weight: 600;
  color: var(--grey-light);
}

.svc-dlg__foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--grey-faint);
}

/* ---------- 页面里自带的售后入口卡片 ---------- */
.svc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  border: 2px solid var(--line-soft);
  background: var(--card-tint);
}
.svc-card__txt { min-width: 0; }
.svc-card__txt strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy-deep);
}
.svc-card__txt p {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--grey-light);
}
.svc-card .sbtn { flex: none; }

/* 页脚里的「售后支持」按钮，外观跟旁边的链接一致 */
.foot__links .foot__linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s;
}
.foot__links .foot__linkbtn:hover { color: #F3EFE8; }

/* 下单成功弹窗里的售后文字链 */
.dlg-svc {
  margin-top: 15px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--grey-faint);
}
.dlg-svc__a {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.dlg-svc__a:hover { color: var(--accent-deep); }

/* 页面里有悬浮入口时，把 toast 抬起来，避免压在按钮上 */
.has-svc .toast-host { bottom: 78px; }

/* 下单页手机端有吸底提交条，入口要往上让 */
@media (max-width: 920px) {
  body.is-order .svc-fab {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 560px) {
  .svc-fab {
    right: 14px;
    bottom: 14px;
    height: 38px;
    padding: 0 14px 0 10px;
    font-size: 12px;
    gap: 6px;
  }
  .svc-fab__ico { width: 17px; height: 17px; }
  .svc-dlg__body { padding: 26px 20px 20px; }
  .svc-dlg__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    margin-top: 18px;
  }
  .svc-qr { width: 176px; }
  .svc-id { text-align: center; width: 100%; }
  .svc-id__copy { width: 100%; }
  .svc-id__hint { margin-top: 8px; }
  .svc-tips { text-align: left; }
  .svc-card { flex-direction: column; align-items: stretch; gap: 12px; }
  .svc-card .sbtn { width: 100%; }
  body.is-order .svc-fab { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   v7 · 收款核对
   静态收款码没有支付回调，只能由客户点「我已付款」告诉我们去核对哪一笔。
============================================================ */

/* ---- 下单成功弹窗里的付款通知 ---- */
.dlg-claim {
  max-width: 340px;
  margin: 18px auto 4px;
  padding: 14px 16px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card-soft);
  text-align: left;
}
.dlg-claim__lead {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--navy-deep);
  text-align: center;
}
.dlg-claim__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-deep);
  outline: none;
}
.dlg-claim__input::placeholder { color: var(--grey-faint); font-weight: 500; }
.dlg-claim__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31, 34, 38, .08); }
.dlg-claim__input:disabled { background: var(--card-soft); color: var(--grey-light); }
.dlg-claim__btn { display: block; width: 100%; height: 40px; margin-top: 9px; font-size: 13px; }
.dlg-claim__hint {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--grey-light);
}
.dlg-claim.is-claimed { border-color: #BFE6D9; background: #F1FAF6; }
.dlg-claim.is-claimed .dlg-claim__hint { color: #4C7B6C; }
.dlg-claim.is-claimed .dlg-claim__btn {
  opacity: 1;
  color: #fff;
  background: #1E9E86;
  box-shadow: none;
  transform: none;
}

/* ---- 我的订单卡片里的付款提示条 ---- */
.payclaim {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid #E8D9C8;
  border-radius: 14px;
  background: #FBF5EC;
}
.payclaim--claimed { border-color: #BFE6D9; background: #F1FAF6; }
.payclaim__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.payclaim__body strong { font-size: 13px; font-weight: 800; color: var(--navy-deep); }
.payclaim__body span { font-size: 11.5px; line-height: 1.65; font-weight: 600; color: var(--grey); }
.payclaim__pay { flex: none; display: grid; gap: 8px; min-width: 240px; }
.payclaim__pay .dlg-claim__input { width: 100%; }
.payclaim__btns { display: flex; gap: 8px; }
.payclaim__btns .sbtn { flex: 1 1 0; }
@media (max-width: 720px) {
  .payclaim { flex-direction: column; align-items: stretch; }
  .payclaim__pay { min-width: 0; }
}
.payclaim__ico {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1E9E86;
  color: #fff;
  font-size: 14px; font-weight: 800;
}
.payclaim .sbtn { flex: none; }
.payclaim__undo {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--grey-light);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.payclaim__undo:hover { color: var(--navy); }

@media (max-width: 520px) {
  .payclaim { flex-direction: column; align-items: stretch; gap: 10px; }
  .payclaim .sbtn, .payclaim__undo { width: 100%; text-align: center; }
  .dlg-claim { padding: 13px 13px 12px; }
}

/* ---- 后台：待核对提醒 / 收款核对区块 ---- */
.adm-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -6px 0 20px;
  padding: 14px 18px;
  border: 1px solid #EBC9A6;
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: #FDF4EC;
}
.adm-alert.is-hidden { display: none; }
.adm-alert__ico {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 16px; font-weight: 800;
}
.adm-alert__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.adm-alert__text strong { font-size: 13.5px; font-weight: 800; color: var(--navy-deep); }
.adm-alert__text span { font-size: 12px; line-height: 1.6; font-weight: 600; color: var(--grey); }
.adm-alert .sbtn { flex: none; }
.adm-filter--alert:not(.is-on) { color: var(--accent-deep); font-weight: 800; }
.adm-row--claim { background: #FFF9F3; }
.adm-row__pay.is-claim { color: var(--accent-deep); }

.dclaim {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-soft);
}
.dclaim--pending { display: block; border-color: #EBC9A6; background: #FDF4EC; }
.dclaim--done { border-color: #BFE6D9; background: #F1FAF6; }
.dclaim__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.dclaim__body strong { font-size: 13px; font-weight: 800; color: var(--navy-deep); }
.dclaim__body span { font-size: 12px; line-height: 1.65; font-weight: 600; color: var(--grey); }
.dclaim__ico {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #1E9E86;
  color: #fff;
  font-size: 15px; font-weight: 800;
}
.dclaim__flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: 2px;
}
.dclaim__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0 0 12px;
}
.dclaim__grid dt { font-size: 11px; font-weight: 700; color: var(--grey-light); }
.dclaim__grid dd {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  word-break: break-all;
}
.dclaim__grid dd b { color: var(--accent-deep); }
.dclaim__hint { margin: 0 0 12px; font-size: 11.5px; line-height: 1.7; font-weight: 600; color: #8A5B3C; }
.dclaim--empty .sbtn { flex: none; }

@media (max-width: 640px) {
  .adm-alert { flex-direction: column; align-items: stretch; gap: 10px; }
  .adm-alert .sbtn { width: 100%; }
  .dclaim--empty { flex-direction: column; align-items: stretch; }
  .dclaim--empty .sbtn { width: 100%; }
  .dclaim__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   下单成功弹窗 · 收款码 + 加微信交付
============================================================ */
.dlg-wx {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px auto 14px;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid #E6EDF5;
  border-radius: 16px;
  background: #F8FBFF;
  text-align: left;
}
.dlg-wx img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  object-fit: cover;
}
.dlg-wx__body { min-width: 0; display: grid; gap: 6px; }
.dlg-wx__body p { margin: 0; font-size: 13px; font-weight: 700; color: var(--navy-deep); }
.dlg-wx__hint { font-size: 11.5px !important; line-height: 1.65; font-weight: 600 !important; color: var(--grey) !important; }
.dlg-wx__btn { justify-self: start; height: 34px; padding: 0 14px; font-size: 12px; }
@media (max-width: 480px) {
  .dlg-wx { flex-direction: column; text-align: center; }
  .dlg-wx__btn { justify-self: center; }
}
/* 收款码移动端提示 */
.dlg-pay-tip {
  margin: 0 auto 10px;
  max-width: 420px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #FFF7E8;
  color: #8A5A00;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 600;
  text-align: left;
}