/* ============================================================
   index.css —— 店面的"衣服"
   9/3 三改：治"字糊"——背景撤细斜纹、表单小字全换黑体、提示字加深
   9/3 二改：电脑上铺成两栏大屏（左挑场景/右填信息），手机单列
   视觉故事：深红丝绒柜台 → 摆着白纸卡；点开请柬才满屏大红
   ============================================================ */

body {
  /* 纯丝绒渐变：撤掉细斜纹——细纹理满屏铺会让小字看着发毛（9/3教训）*/
  background: radial-gradient(130% 90% at 50% 0%, #8a1828 0%, #52090f 100%);
  background-attachment: fixed;        /* 滚动时布不动，布是真的"铺"着 */
  color: var(--c-xuanzhi);
  min-height: 100dvh;
}

/* ---------- 门头：金字品牌 + 白字口号 ---------- */
.shop-head {
  padding: 10vh 6vw 4vh;
  text-align: center;
}
.shop-brand {
  font-weight: 700;                   /* 店名加粗，金字的分量感 */
  font-size: 42px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--c-jin);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);   /* 只压一团暗影托底，别再用白边描——白边会让金字发毛 */
}
.shop-rule {
  width: 64px; height: 2px;
  margin: 16px auto 14px;
  background: linear-gradient(90deg, transparent, var(--c-jin), transparent);
}
.shop-slogan {
  font-family: var(--f-hei);          /* 界面字换黑体 */
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: rgba(247,241,227,.95);
}

/* ---------- 步骤标：壹/贰 两个小节名 ---------- */
.step-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 6vw 14px;
  font-family: var(--f-hei);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .35em;
  color: var(--c-liang);
}
.step-tag::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(232,195,106,.55), transparent);
}

/* ---------- 场景卡：红柜台上摆的白纸卡 ---------- */
.scenes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 6vw;
}
.scene-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 6px 18px;
  background: #fffdf8;
  border: 1px solid rgba(232,195,106,.65);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
  font-family: inherit;
}
.scene-card i {
  font-style: normal;
  font-size: 34px;
  line-height: 1;
  color: var(--c-zhusha);
}
.scene-card b {
  font-family: var(--f-hei);
  font-size: 16px;
  letter-spacing: .18em;
  text-indent: .18em;
  font-weight: 600;
  white-space: nowrap;                /* 名字永远一行，挤也不许折 */
  color: var(--c-xuan);
}
.scene-card span {
  font-family: var(--f-hei);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(110,15,26,.85);
}
.scene-card.picked {
  background: var(--c-zhusha);
  border-color: var(--c-liang);
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.scene-card.picked i, .scene-card.picked b { color: var(--c-liang); }
.scene-card.picked span { color: rgba(247,241,227,.75); }
.scene-card.locked { opacity: .5; cursor: not-allowed; }
.scene-card:active { transform: scale(.97); }

/* ---------- 三个卖点（电脑大屏左栏的干货）---------- */
.selling {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 36px 6vw 0;
}
.selling li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-hei);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .12em;
  color: rgba(247,241,227,.92);
}
.selling i {                        /* 快/智/省：金色小圆徽 */
  font-style: normal;
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  font-family: var(--f-kai);
  font-size: 17px;
  color: var(--c-liang);
  border: 1px solid rgba(232,195,106,.6);
  border-radius: 50%;
}

/* ---------- 表单卡 ---------- */
.form-card {
  max-width: 560px;
  margin: 16px 6vw 0;
  padding: 30px 8vw 28px;
  background: #fffdf8;
  border: 1px solid rgba(232,195,106,.55);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0,0,0,.38);
}
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.fields label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--f-hei);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .28em;
  color: #4a0810;                      /* 再压深一档：红标签要黑得跳出来 */
}
.fields label.wide { grid-column: 1 / -1; }
.fields input {
  border: none;
  border-bottom: 1.5px solid rgba(166,27,41,.35);
  padding: 7px 2px;
  font-family: var(--f-hei);           /* 输入框换黑体：楷体小字在Windows上发虚 */
  font-size: 16px;
  font-weight: 500;
  color: #4a0810;
  background: transparent;
  outline: none;
  transition: border-color .25s;
}
.fields input:focus { border-bottom-color: var(--c-zhusha); }
.fields input::placeholder { color: rgba(110,15,26,.58); }   /* 原来浅到35%太糊，加深 */

/* ---------- 三个按钮 ---------- */
.actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}
.btn {
  flex: 1;
  padding: 14px 0;
  border: none;
  border-radius: 10px;
  font-family: var(--f-hei);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2em;
  text-indent: .2em;
  cursor: pointer;
  transition: transform .15s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(166,27,41,.55);
  color: var(--c-zhusha);
}
.btn-main {
  background: var(--c-zhusha);
  color: var(--c-xuanzhi);
  box-shadow: 0 6px 18px rgba(166,27,41,.35);
}
.btn-gold {
  background: linear-gradient(135deg, var(--c-liang), var(--c-jin));
  color: #4a0810;
}

/* ---------- 底部提示行 + 页脚 ---------- */
.tip {
  margin-top: 16px;
  text-align: center;
  font-family: var(--f-hei);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(247,241,227,.78);
  min-height: 1.3em;
  transition: color .3s;
}
.tip.ok { color: var(--c-liang); }

.shop-foot {
  padding: 44px 6vw 34px;
  text-align: center;
  font-family: var(--f-hei);
  font-size: 12px;
  letter-spacing: .25em;
  color: rgba(247,241,227,.62);
}

/* ============================================================
   平板（700-1000px）：还是单列，但收窄居中
   ============================================================ */
@media (min-width: 700px) and (max-width: 999px) {
  .step-tag, .scenes, .selling { max-width: 620px; margin-left: auto; margin-right: auto; padding: 0; }
  .step-tag { margin-top: 40px; }
  .selling { margin-top: 32px; }
  .scenes { grid-template-columns: repeat(4, 1fr); }
  .form-card { margin: 16px auto 0; padding: 34px 40px 30px; }
}

/* ============================================================
   电脑（≥1000px）：两栏大屏版——左挑场景卖点，右表单常驻
   ============================================================ */
@media (min-width: 1000px) {
  .shop-head { padding: 7vh 4vw 3vh; }

  .shop-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 4vw 6vh;
    display: grid;
    grid-template-columns: 1fr 440px;   /* 左栏弹性，右栏定宽放表单 */
    gap: 60px;
    align-items: start;                 /* 两栏各自长各自的，不互相拉伸 */
  }

  /* 右栏粘住：往下滚表单不动，一直陪着你 */
  .shop-right { position: sticky; top: 48px; }

  .step-tag { margin: 0 0 18px; }       /* 两栏里不再需要左右留白了 */

  /* 场景卡改"图标在左、名字+说明右侧上下排"——窄窗口也不折行 */
  .scenes { padding: 0; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .scene-card {
    display: grid;                    /* 网格：图标占一列，文字占一列 */
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 5px;
    padding: 18px 18px;
    text-align: left;
  }
  .scene-card i { font-size: 36px; }
  .scene-card b { text-indent: 0; }
  .scene-card span {
    grid-column: 2;                   /* 说明挪到名字正下方，不跟名字抢一行 */
    white-space: nowrap;
  }

  .selling { margin: 40px 0 0; gap: 20px; }

  .form-card { margin: 0; padding: 34px 38px 30px; }
}

/* ---------- 想说的话 + AI代写（步骤6新增）---------- */
.msg-label {
  display: block;
  margin-top: 24px;
  font-family: var(--f-hei);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .28em;
  color: #5c0a14;
}
.msg-label span {                    /* 括号里的说明：小一号、变灰，但不能灰到要眯眼 */
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: rgba(110,15,26,.68);
}
.ai-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  align-items: stretch;
}
.ai-row textarea {
  flex: 1;
  resize: vertical;
  border: 1.5px solid rgba(166,27,41,.3);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--f-hei);          /* 同输入框：小字黑体才清晰，楷体留给请柬大字 */
  font-size: 14.5px;
  line-height: 1.7;
  color: #4a0810;
  background: transparent;
  outline: none;
  transition: border-color .25s;
}
.ai-row textarea:focus { border-color: var(--c-zhusha); }
.ai-row textarea::placeholder { color: rgba(110,15,26,.58); }
.ai-row .btn {
  flex: 0 0 auto;                    /* AI按钮不跟着拉伸 */
  padding: 0 16px;
}

/* AI给的六版文案：可点的卡片（单列往下排，来几条画几条） */
.ai-choices {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.ai-choice {
  text-align: left;
  padding: 11px 14px;
  background: rgba(166,27,41,.05);
  border: 1px solid rgba(166,27,41,.22);
  border-radius: 10px;
  font-family: var(--f-hei);         /* 选用卡片上先求看清；请柬成品里才是楷体大字 */
  font-size: 14px;
  line-height: 1.7;
  color: #4a0810;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ai-choice:hover { border-color: rgba(166,27,41,.5); }
.ai-choice.picked {                  /* 选中的那版：金框点亮 */
  border-color: var(--c-jin);
  background: rgba(232,195,106,.14);
}

/* ---------- 配乐三选一（步骤7）：小药丸按钮 ---------- */
.music-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pill {
  padding: 8px 16px;
  border: 1px solid rgba(166,27,41,.4);
  border-radius: 999px;                /* 药丸=圆角拉满 */
  background: transparent;
  font-family: var(--f-hei);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  color: #4a0810;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.pill.picked {                         /* 选中的：朱砂底白字 */
  background: var(--c-zhusha);
  border-color: var(--c-zhusha);
  color: var(--c-xuanzhi);
}

/* ---------- 尊重"减少动态" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}