/* ===== app.wxss（page 块转为 :root） ===== */
/* 橙子艺术空间 · 家长端小程序 全局样式
   设计依据：docs/miniapp/design-system.md
   基准画布 375px，1px = calc(var(--u) * 2)
*/

:root {
  --brand: #C0693A;
  --brand-soft: #FBF2EC;
  --page-bg: #F6F5F3;
  --card-bg: #FFFFFF;
  --ink: #2B2B2B;
  --ink-2: #8A8078;
  --ink-3: #B3A294;
  --line: #F1EDE9;
  --tag-bg: #D8B49B;
  --danger: #D54941;

  background: var(--page-bg);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(var(--u) * 28);
  line-height: 1.6;
}

view, text, button, input, image {
  box-sizing: border-box;
}

/* 卡片 */
.card {
  background: var(--card-bg);
  border-radius: calc(var(--u) * 28);
  margin: 0 calc(var(--u) * 28) calc(var(--u) * 28);
  padding: calc(var(--u) * 32) calc(var(--u) * 34);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 28) rgba(120, 90, 60, 0.07);
}

/* 页头 */
.page-head {
  padding: calc(var(--u) * 12) calc(var(--u) * 40) 0;
}
.page-head .name {
  font-size: calc(var(--u) * 42);
  font-weight: 600;
  color: var(--ink);
}
.page-head .sub {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 14);
}

/* 品牌页头 */
.hero {
  position: relative;
  background: linear-gradient(180deg, #FBF2EC 0%, #F6F5F3 100%);
  padding: calc(var(--u) * 30) calc(var(--u) * 28) calc(var(--u) * 52) calc(var(--u) * 40);
  border-radius: 0 0 calc(var(--u) * 44) calc(var(--u) * 44);
}

.hero .exit {
  position: absolute;
  top: calc(var(--u) * 26);
  right: calc(var(--u) * 24);
  font-size: calc(var(--u) * 24);
  color: #A07A62;
  padding: calc(var(--u) * 8) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 20);
  border: calc(var(--u) * 1) solid #EBDCCF;
  line-height: 1.4;
}

.hero .exit:active {
  background: #F6EDE6;
}
.hero .hero-row {
  display: flex;
  align-items: flex-end;
}
.hero .logo-img {
  width: calc(var(--u) * 280);
  display: block;
  margin-right: calc(var(--u) * 22);
  flex: none;
}
.hero .logo-mark {
  width: calc(var(--u) * 80);
  height: calc(var(--u) * 80);
  margin-right: calc(var(--u) * 22);
}
.hero .logo-txt {
  font-size: calc(var(--u) * 34);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 1);
  color: #3A2A20;
}
.hero .slogan {
  font-size: calc(var(--u) * 24);
  color: #A07A62;
  letter-spacing: calc(var(--u) * 1);
  line-height: 1;
  padding-bottom: 0;
  margin-left: auto;
  margin-right: calc(var(--u) * 12);
  text-align: right;
}

/* 主按钮 */
.btn-primary {
  margin: calc(var(--u) * 4) calc(var(--u) * 28) 0;
  height: calc(var(--u) * 92);
  border-radius: calc(var(--u) * 26);
  background: var(--brand);
  color: #FFFFFF;
  font-size: calc(var(--u) * 31);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 32) rgba(192, 105, 58, 0.26);
}
.btn-primary:active {
  opacity: 0.88;
}

/* 作品缩略图：一行两张，尽量大 */
.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 16);
}
.thumbs .thumb {
  /* 留 calc(var(--u) * 4) 余量，避免舍入后刚好超出而换行 */
  width: calc((100% - calc(var(--u) * 20)) / 2);
  height: 0;
  padding-bottom: calc((100% - calc(var(--u) * 20)) / 2);
  position: relative;
  border-radius: calc(var(--u) * 22);
  overflow: hidden;
  background: #F3F0EC;
}
.thumbs .thumb image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 分割与文本 */
.divider {
  height: calc(var(--u) * 1);
  background: var(--line);
}
.muted {
  color: var(--ink-2);
}
.center {
  text-align: center;
}

/* 分享前的选择弹层（详情页与作品页共用） */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(40, 30, 24, 0.45);
  z-index: 90;
  display: flex;
  align-items: flex-end;
}

.sheet {
  width: 100%;
  background: #FFFFFF;
  border-radius: calc(var(--u) * 32) calc(var(--u) * 32) 0 0;
  padding: calc(var(--u) * 44) calc(var(--u) * 40) calc(calc(var(--u) * 40) + env(safe-area-inset-bottom));
}

.sheet-t {
  font-size: calc(var(--u) * 34);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.sheet-d {
  font-size: calc(var(--u) * 26);
  color: var(--ink-2);
  text-align: center;
  margin-top: calc(var(--u) * 20);
}

.opt {
  display: flex;
  align-items: center;
  margin-top: calc(var(--u) * 28);
  padding: calc(var(--u) * 8) calc(var(--u) * 4);
}

.opt-txt {
  font-size: calc(var(--u) * 29);
  color: #3A2A20;
  margin-left: calc(var(--u) * 18);
}

.box {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  flex: none;
  border-radius: calc(var(--u) * 12);
  border: calc(var(--u) * 2) solid #D8CFC6;
  background: #FFFFFF;
  color: #FFFFFF;
  font-size: calc(var(--u) * 28);
  line-height: calc(var(--u) * 40);
  text-align: center;
}

.box.on {
  border-color: var(--brand);
  background: var(--brand);
}

.sheet-btn {
  margin-top: calc(var(--u) * 44);
  height: calc(var(--u) * 96);
  border-radius: calc(var(--u) * 26);
  background: var(--brand);
  color: #FFFFFF;
  font-size: calc(var(--u) * 31);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-btn:active {
  background: #AF5B2F;
}

.sheet-cancel {
  margin-top: calc(var(--u) * 22);
  text-align: center;
  font-size: calc(var(--u) * 27);
  color: var(--ink-2);
  padding: calc(var(--u) * 12) 0;
}

/* 分享弹层里的名字输入框 */
.name-input {
  margin-top: calc(var(--u) * 22);
  height: calc(var(--u) * 92);
  border-radius: calc(var(--u) * 22);
  background: #FCFAF8;
  border: calc(var(--u) * 2) solid #E8DED4;
  padding: 0 calc(var(--u) * 28);
  font-size: calc(var(--u) * 30);
  color: var(--ink);
}

/* 出图用的画布：藏在屏幕外 */
.card-canvas {
  position: fixed;
  left: calc(var(--u) * -9999);
  top: 0;
  width: calc(var(--u) * 750);
  height: calc(var(--u) * 1600);
  pointer-events: none;
}


/* ===== pages/bind/bind.wxss ===== */
#pg-bind .wrap {
  min-height: 100vh;
  background: linear-gradient(180deg, #FBF2EC 0%, #FFFFFF 52%, #FFFFFF 100%);
  padding: calc(var(--u) * 132) calc(var(--u) * 52) 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 4 号：墙上挂着的画。透明度压得很低，只当下面的底色气围 */
#pg-bind .wall {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

#pg-bind .paint {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* 2 号：画框（四条线，动效在文件末尾） */
#pg-bind .frame {
  position: fixed;
  left: calc(var(--u) * 40);
  top: calc(var(--u) * 40);
  right: calc(var(--u) * 40);
  bottom: calc(var(--u) * 40);
  pointer-events: none;
}

#pg-bind .f-top, #pg-bind .f-bottom {
  position: absolute;
  height: calc(var(--u) * 2);
  width: 0;
  background: rgba(192, 105, 58, 0.38);
}

#pg-bind .f-top { top: 0; left: 0; }

#pg-bind .f-bottom { bottom: 0; right: 0; }

#pg-bind .f-left, #pg-bind .f-right {
  position: absolute;
  width: calc(var(--u) * 2);
  height: 0;
  background: rgba(192, 105, 58, 0.38);
}

#pg-bind .f-right { top: 0; right: 0; }

#pg-bind .f-left { bottom: 0; left: 0; }

/* 招牌 */
#pg-bind .brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#pg-bind .mk {
  width: calc(var(--u) * 366);
  display: block;
}

#pg-bind .slogan {
  font-size: calc(var(--u) * 29);
  color: #A07A62;
  letter-spacing: calc(var(--u) * 3);
  line-height: 1.6;
  margin-top: calc(var(--u) * 34);
}

/* 两条路 */
#pg-bind .acts {
  margin-top: calc(var(--u) * 210);
}

/* 主按钮：进入主页 */
#pg-bind .act-main {
  height: calc(var(--u) * 108);
  border-radius: calc(var(--u) * 28);
  background: #C0693A;
  color: #FFFFFF;
  font-size: calc(var(--u) * 33);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(192, 105, 58, 0.26);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

#pg-bind .act-main:active {
  background: #AF5B2F;
  transform: scale(0.97);
}

/* 次按钮：我的孩子 */
#pg-bind .act-sub {
  margin-top: calc(var(--u) * 46);
  height: calc(var(--u) * 108);
  border-radius: calc(var(--u) * 28);
  border: calc(var(--u) * 2) solid #E8DED4;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 31);
  font-weight: 600;
  color: #6B5A4E;
  letter-spacing: calc(var(--u) * 2);
  transition: transform 0.12s ease, background 0.12s ease;
}

#pg-bind .act-sub:active {
  background: #FCFAF8;
  transform: scale(0.97);
}

#pg-bind .act-sub-tip {
  margin-top: calc(var(--u) * 16);
  text-align: center;
  font-size: calc(var(--u) * 23);
  color: var(--ink-3);
  letter-spacing: calc(var(--u) * 1);
}


/* ============================================================
   动效（2026-09-12 加）
   不想要动效时：把本段整段删掉即可回到静态版，其余样式不受影响。
   全部只动 transform / opacity / box-shadow，不改尺寸与布局。
   ============================================================ */

/* 1. 入场：从下往上淡入
   用 backwards 而不是 both：动画结束后释放 transform，
   否则会永久压住按钮 :active 的缩放反馈 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(calc(var(--u) * 20)); }
  to   { opacity: 1; transform: translateY(0); }
}

#pg-bind .brand .mk {
  animation: riseIn 0.6s ease-out backwards;
}

/* 标语的入场改由单字负责（见下方 3 号） */

/* 2 号：画框 —— 四条线依次接上，围成一圈 */
@keyframes lineX {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes lineY {
  from { height: 0; }
  to   { height: 100%; }
}

#pg-bind .f-top { animation: lineX 0.36s ease-out 0.10s forwards; }
#pg-bind .f-right { animation: lineY 0.36s ease-out 0.46s forwards; }
#pg-bind .f-bottom { animation: lineX 0.36s ease-out 0.82s forwards; }
#pg-bind .f-left { animation: lineY 0.36s ease-out 1.18s forwards; }

/* 3 号：标语逐字淡入（每个字的延迟由页面按序号算出） */
@keyframes charIn {
  from { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  to   { opacity: 1; transform: translateY(0); }
}

#pg-bind .slogan .ch {
  display: inline-block;
  opacity: 0;
  animation: charIn 0.5s ease-out both;
}

/* 4 号：三幅画轮流浮现，各亮 8 秒，24 秒一轮，透明度 0.18 */
@keyframes wallFade {
  0%   { opacity: 0; }
  8%   { opacity: 0.18; }
  30%  { opacity: 0.18; }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}

#pg-bind .paint.p1 { animation: wallFade 24s ease-in-out 0s infinite; }
#pg-bind .paint.p2 { animation: wallFade 24s ease-in-out 8s infinite; }
#pg-bind .paint.p3 { animation: wallFade 24s ease-in-out 16s infinite; }

/* 主按钮呼吸：周期 4.5s，起跑 0.9s（入场收尾之后） */
#pg-bind .act-main {
  animation: riseIn 0.6s ease-out 0.3s backwards, breathe 4.5s ease-in-out 0.9s infinite;
}

#pg-bind .act-sub {
  animation: riseIn 0.6s ease-out 0.4s backwards;
}

#pg-bind .act-sub-tip {
  animation: riseIn 0.6s ease-out 0.48s backwards;
}

/* 2. 主按钮呼吸：阴影范围与浓度一起变化（周期 4.5s，与光晕一致） */
@keyframes breathe {
  0%, 100% { box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(192, 105, 58, 0.20); }
  50%      { box-shadow: 0 calc(var(--u) * 26) calc(var(--u) * 54) rgba(192, 105, 58, 0.55); }
}

/* 标语底下那道线，从左生长到右，像落了一笔 */
#pg-bind .slogan::after {
  content: '';
  display: block;
  width: 0;
  height: calc(var(--u) * 2);
  margin: calc(var(--u) * 16) auto 0;
  background: rgba(192, 105, 58, 0.45);
  animation: drawLine 0.9s ease-out 1.35s forwards;
}

@keyframes drawLine {
  to { width: calc(var(--u) * 132); }
}


/* ===== pages/code/code.wxss ===== */
#pg-code .wrap {
  min-height: 100vh;
  background: linear-gradient(180deg, #FBF2EC 0%, #FFFFFF 40%);
  padding: calc(var(--u) * 120) calc(var(--u) * 52) 0;
}

#pg-code .head {
  text-align: center;
}

#pg-code .t {
  font-size: calc(var(--u) * 42);
  font-weight: 600;
  color: #2B2B2B;
  letter-spacing: calc(var(--u) * 3);
}

#pg-code .s {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 20);
  letter-spacing: calc(var(--u) * 1);
}

#pg-code .input {
  margin-top: calc(var(--u) * 76);
  height: calc(var(--u) * 110);
  border-radius: calc(var(--u) * 28);
  background: #FFFFFF;
  border: calc(var(--u) * 2) solid #E8DED4;
  padding: 0 calc(var(--u) * 32);
  font-size: calc(var(--u) * 42);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 14);
  text-indent: calc(var(--u) * 14);
  text-align: center;
  color: #2B2B2B;
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(120, 90, 60, 0.06);
}

#pg-code .input-error {
  border-color: #D54941;
}

#pg-code .ph {
  color: #CFC7C0;
  font-size: calc(var(--u) * 28);
  letter-spacing: calc(var(--u) * 2);
  font-weight: 400;
}

#pg-code .err {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--u) * 24);
  font-size: calc(var(--u) * 25);
  color: #D54941;
}

#pg-code .err-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  border: calc(var(--u) * 2) solid #D54941;
  font-size: calc(var(--u) * 20);
  margin-right: calc(var(--u) * 12);
}

#pg-code .btn-line {
  margin-top: calc(var(--u) * 46);
  height: calc(var(--u) * 100);
  border-radius: calc(var(--u) * 28);
  background: #C0693A;
  color: #FFFFFF;
  font-size: calc(var(--u) * 31);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(192, 105, 58, 0.22);
}

#pg-code .btn-line:active {
  background: #AF5B2F;
}

#pg-code .tip {
  margin-top: calc(var(--u) * 44);
  text-align: center;
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  padding: calc(var(--u) * 16) 0;
}


/* ===== pages/home/home.wxss ===== */
#pg-home .kid-row {
  display: flex;
  align-items: center;
}

#pg-home .avatar.img {
  object-fit: cover;
}

#pg-home .avatar {
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 100);
  border-radius: calc(var(--u) * 30);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: calc(var(--u) * 36);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(var(--u) * 26);
}

#pg-home .kid-info {
  flex: 1;
}

#pg-home .kid-n {
  font-size: calc(var(--u) * 33);
  font-weight: 600;
}

#pg-home .kid-s {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 10);
}

#pg-home .arrow {
  font-size: calc(var(--u) * 34);
  color: var(--ink-3);
  margin-left: calc(var(--u) * 16);
}

#pg-home .card-tap:active {
  opacity: 0.94;
}

#pg-home .split {
  display: flex;
  margin-top: calc(var(--u) * 32);
  padding-top: calc(var(--u) * 30);
  border-top: calc(var(--u) * 1) solid var(--line);
}

#pg-home .si {
  flex: 1;
  text-align: center;
}

#pg-home .si + .si {
  border-left: calc(var(--u) * 1) solid var(--line);
}

#pg-home .si-n {
  font-size: calc(var(--u) * 38);
  font-weight: 700;
  color: #3A2A20;
}

#pg-home .si-u {
  font-size: calc(var(--u) * 22);
  font-weight: 400;
  color: var(--ink-2);
  margin-left: calc(var(--u) * 4);
}

#pg-home .si-l {
  font-size: calc(var(--u) * 23);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 10);
}

#pg-home .sec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(var(--u) * 26);
  color: var(--ink-2);
  padding-bottom: calc(var(--u) * 24);
}

#pg-home .sec-b {
  font-size: calc(var(--u) * 30);
  font-weight: 600;
  color: var(--ink);
}

#pg-home .sec-r {
  font-size: calc(var(--u) * 25);
}

#pg-home .latest-title {
  font-size: calc(var(--u) * 32);
  font-weight: 600;
  padding-bottom: calc(var(--u) * 22);
}

#pg-home .note {
  margin-top: calc(var(--u) * 28);
  background: #FBF8F5;
  border-radius: calc(var(--u) * 22);
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
}

#pg-home .note-lab {
  font-size: calc(var(--u) * 23);
  color: var(--brand);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 12);
}

#pg-home .note-txt {
  font-size: calc(var(--u) * 27);
  line-height: 1.9;
  color: #544439;
}

#pg-home .skel {
  height: calc(var(--u) * 32);
  border-radius: calc(var(--u) * 10);
  background: #F3F0EC;
  margin-bottom: calc(var(--u) * 20);
}

#pg-home .skel-line {
  width: 70%;
}

#pg-home .skel-line.short {
  width: 40%;
  margin-bottom: 0;
}

#pg-home .empty-t {
  font-size: calc(var(--u) * 29);
  font-weight: 600;
  color: var(--ink-2);
}

#pg-home .empty-s {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 12);
}


/* ===== pages/works/works.wxss ===== */
#pg-works .group {
  padding-top: calc(var(--u) * 12);
}

#pg-works .group-head {
  display: flex;
  align-items: baseline;
  padding: calc(var(--u) * 18) calc(var(--u) * 28) calc(var(--u) * 22);
}

#pg-works .group-title {
  font-size: calc(var(--u) * 31);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: calc(var(--u) * 1);
}

#pg-works .group-count {
  font-size: calc(var(--u) * 23);
  color: var(--ink-3);
  margin-left: calc(var(--u) * 16);
}

#pg-works .grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 calc(var(--u) * 28) calc(var(--u) * 24);
  gap: calc(var(--u) * 22);
}

#pg-works .g {
  /* 留 calc(var(--u) * 4) 余量，避免舍入后超宽换行 */
  width: calc((100% - calc(var(--u) * 26)) / 2);
  background: #FFFFFF;
  border-radius: calc(var(--u) * 22);
  overflow: hidden;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 28) rgba(120, 90, 60, 0.07);
}

#pg-works .g-img {
  width: 100%;
  height: calc(var(--u) * 320);
}

#pg-works .g-meta {
  padding: calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 22);
}

#pg-works .g-d {
  font-size: calc(var(--u) * 23);
  color: var(--ink-2);
}

#pg-works .g-t {
  font-size: calc(var(--u) * 27);
  font-weight: 600;
  margin-top: calc(var(--u) * 8);
}

#pg-works .empty {
  text-align: center;
  padding: calc(var(--u) * 120) calc(var(--u) * 40);
}

#pg-works .empty-t {
  font-size: calc(var(--u) * 29);
  font-weight: 600;
  color: var(--ink-2);
}

#pg-works .empty-s {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 14);
  line-height: 1.8;
}

#pg-works .skel {
  height: calc(var(--u) * 32);
  border-radius: calc(var(--u) * 10);
  background: #F3F0EC;
  margin-bottom: calc(var(--u) * 20);
}

#pg-works .skel-line {
  width: 70%;
}

#pg-works .skel-line.short {
  width: 40%;
  margin-bottom: 0;
}

/* 页头右侧的「选择 / 分享」 */
#pg-works .page-head {
  position: relative;
}

#pg-works .pick {
  position: absolute;
  right: calc(var(--u) * 40);
  top: calc(var(--u) * 22);
  font-size: calc(var(--u) * 27);
  color: var(--brand);
  padding: calc(var(--u) * 8) calc(var(--u) * 24);
  border-radius: calc(var(--u) * 22);
  border: calc(var(--u) * 2) solid rgba(192, 105, 58, 0.35);
  background: #FFFFFF;
}

#pg-works .pick:active {
  background: #FBF3EE;
}

/* 已进入选择模式：留着位置，变灰不可点 */
#pg-works .pick.off {
  color: #C4BAB2;
  border-color: #EDE7E1;
  background: #FBF9F7;
}

/* 选择模式：勾选框与选中态 */
#pg-works .g {
  position: relative;
}

#pg-works .g.on {
  box-shadow: 0 0 0 calc(var(--u) * 4) var(--brand), 0 calc(var(--u) * 6) calc(var(--u) * 28) rgba(120, 90, 60, 0.07);
}

#pg-works .g-check {
  position: absolute;
  top: calc(var(--u) * 12);
  right: calc(var(--u) * 12);
  width: calc(var(--u) * 46);
  height: calc(var(--u) * 46);
  border-radius: calc(var(--u) * 23);
  border: calc(var(--u) * 3) solid #FFFFFF;
  background: rgba(40, 30, 24, 0.30);
  color: #FFFFFF;
  font-size: calc(var(--u) * 28);
  line-height: calc(var(--u) * 40);
  text-align: center;
}

#pg-works .g.on .g-check {
  background: var(--brand);
}

/* 选择模式的提示语，顺便给底部操作条留出位置 */
#pg-works .pick-hint {
  padding: calc(var(--u) * 6) calc(var(--u) * 40) calc(var(--u) * 190);
  font-size: calc(var(--u) * 24);
  color: var(--ink-3);
  text-align: center;
}

/* 选择模式：底部操作条 */
#pg-works .bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: calc(var(--u) * 112);
  padding: calc(var(--u) * 16) calc(var(--u) * 40);
  padding-bottom: calc(calc(var(--u) * 16) + env(safe-area-inset-bottom));
  background: #FFFFFF;
  box-shadow: 0 calc(var(--u) * -6) calc(var(--u) * 26) rgba(120, 90, 60, 0.10);
  display: flex;
  align-items: center;
  z-index: 60;
}

#pg-works .bar-cancel {
  font-size: calc(var(--u) * 27);
  color: var(--ink-2);
  padding: calc(var(--u) * 14) calc(var(--u) * 6);
  margin-right: calc(var(--u) * 28);
}

#pg-works .bar-cancel:active {
  color: var(--ink);
}

#pg-works .bar-n {
  flex: 1;
  font-size: calc(var(--u) * 27);
  color: var(--ink-2);
  text-align: center;
}

/* 选满 9 张时整行变品牌色，给个反馈 */
#pg-works .bar-n.full {
  color: var(--brand);
  font-weight: 600;
}

#pg-works .bar-btn {
  height: calc(var(--u) * 78);
  padding: 0 calc(var(--u) * 46);
  border-radius: calc(var(--u) * 22);
  background: var(--brand);
  color: #FFFFFF;
  font-size: calc(var(--u) * 29);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 1);
  display: flex;
  align-items: center;
}

#pg-works .bar-btn:active {
  background: #AF5B2F;
}

#pg-works .bar-btn.off {
  background: #DCD5CE;
}


/* ===== pages/child/child.wxss ===== */
/* 拖动提示：只在多个学员时出现 */
#pg-child .drag-tip {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  margin: calc(var(--u) * 2) calc(var(--u) * 40) calc(var(--u) * 20);
}

#pg-child .dt-eye {
  font-size: calc(var(--u) * 24);
  color: var(--brand);
}

#pg-child .dt-txt {
  font-size: calc(var(--u) * 23);
  color: var(--ink-3);
}

#pg-child .list {
  padding: calc(var(--u) * 8) calc(var(--u) * 28) 0;
}

#pg-child .kid {
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border-radius: calc(var(--u) * 28);
  padding: 0 calc(var(--u) * 32);
  height: calc(var(--u) * 176);
  box-sizing: border-box;
  margin-bottom: calc(var(--u) * 24);
  position: relative;
  border: calc(var(--u) * 3) solid transparent;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 28) rgba(120, 90, 60, 0.07);
  will-change: transform;
}

/* 排在第一位的：作品页默认看的就是这一位 */
#pg-child .kid.top1 {
  border-color: #EAD9C9;
}

/* 拿起来的那张：翘起来，颜色变赭橙 */
#pg-child .kid.dragging {
  border-color: var(--brand);
  box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 48) rgba(120, 90, 60, 0.22);
  z-index: 10;
}

#pg-child .first-tag {
  position: absolute;
  top: calc(var(--u) * -3);
  right: calc(var(--u) * -3);
  font-size: calc(var(--u) * 20);
  line-height: 1.5;
  color: #FFFFFF;
  background: var(--brand);
  border-radius: 0 calc(var(--u) * 26) 0 calc(var(--u) * 14);
  padding: calc(var(--u) * 4) calc(var(--u) * 16);
}

#pg-child .kid:active {
  opacity: 0.92;
}

#pg-child .avatar.img {
  object-fit: cover;
}

#pg-child .avatar {
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 100);
  border-radius: calc(var(--u) * 30);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: calc(var(--u) * 36);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(var(--u) * 26);
}

#pg-child .kid-info {
  flex: 1;
}

#pg-child .kid-n {
  font-size: calc(var(--u) * 33);
  font-weight: 600;
}

#pg-child .kid-s {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 10);
}

#pg-child .arrow {
  font-size: calc(var(--u) * 34);
  color: var(--ink-3);
  margin-left: calc(var(--u) * 16);
}

#pg-child .foot-note {
  text-align: center;
  font-size: calc(var(--u) * 24);
  color: var(--ink-3);
  padding: calc(var(--u) * 16) 0 calc(var(--u) * 60);
}

#pg-child .skel {
  height: calc(var(--u) * 32);
  border-radius: calc(var(--u) * 10);
  background: #F3F0EC;
  margin-bottom: calc(var(--u) * 20);
}

#pg-child .skel-line {
  width: 70%;
}

#pg-child .skel-line.short {
  width: 40%;
  margin-bottom: 0;
}

#pg-child .empty-t {
  font-size: calc(var(--u) * 29);
  font-weight: 600;
  color: var(--ink-2);
}

#pg-child .empty-s {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 12);
}


/* ===== pages/profile/profile.wxss ===== */
/* 头部：头像在左，名字与课程在右（与老师端一致） */
#pg-profile .top {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 28);
  padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 12);
}

#pg-profile .av-wrap {
  position: relative;
  flex: none;
}

#pg-profile .avatar.img {
  object-fit: cover;
}

#pg-profile .avatar {
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 120);
  border-radius: calc(var(--u) * 8);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: calc(var(--u) * 46);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 头像右下角的小笔：点一下换头像 */
#pg-profile .av-edit {
  position: absolute;
  right: calc(var(--u) * -8);
  bottom: calc(var(--u) * -8);
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 22);
  background: var(--brand);
  color: #FFFFFF;
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 44);
  text-align: center;
  border: calc(var(--u) * 3) solid #FFFFFF;
}

#pg-profile .who {
  flex: 1;
  min-width: 0;
  padding-top: calc(var(--u) * 4);
}

#pg-profile .nm {
  font-size: calc(var(--u) * 42);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 1);
}

/* 联系电话：平时一串号，点「更改」就地换成输入框 */
#pg-profile .contact {
  display: flex;
  align-items: center;
  margin-top: calc(var(--u) * 12);
  min-height: calc(var(--u) * 52);
}

#pg-profile .c-lab {
  flex: none;
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
}

#pg-profile .c-val {
  font-size: calc(var(--u) * 26);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

#pg-profile .c-val.dim {
  color: var(--ink-3);
}

#pg-profile .c-edit {
  flex: none;
  font-size: calc(var(--u) * 23);
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: calc(var(--u) * 6);
  padding: calc(var(--u) * 4) calc(var(--u) * 14);
  margin-left: calc(var(--u) * 16);
}

#pg-profile .c-edit.on {
  background: var(--brand);
  color: #FFFFFF;
}

#pg-profile .c-inp {
  flex: 1;
  min-width: 0;
  font-size: calc(var(--u) * 27);
  color: var(--ink);
  background: #FCFAF8;
  border: calc(var(--u) * 2) solid var(--line);
  border-radius: calc(var(--u) * 10);
  padding: calc(var(--u) * 10) calc(var(--u) * 18);
  margin-left: calc(var(--u) * 4);
}

#pg-profile .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--u) * 26) 0;
  border-bottom: calc(var(--u) * 1) solid var(--line);
}

#pg-profile .row.last {
  border-bottom: none;
}

#pg-profile .k {
  font-size: calc(var(--u) * 27);
  color: var(--ink-2);
}

#pg-profile .v {
  font-size: calc(var(--u) * 28);
  color: var(--ink);
}

#pg-profile .v.strong {
  font-weight: 700;
  color: var(--brand);
}

#pg-profile .hint {
  font-size: calc(var(--u) * 23);
  color: var(--ink-3);
  padding-top: calc(var(--u) * 6);
}

#pg-profile .entries {
  background: var(--card-bg);
  border-radius: calc(var(--u) * 28);
  margin: 0 calc(var(--u) * 28) calc(var(--u) * 60);
  overflow: hidden;
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 28) rgba(120, 90, 60, 0.07);
}

#pg-profile .entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--u) * 34) calc(var(--u) * 34);
  font-size: calc(var(--u) * 30);
  border-bottom: calc(var(--u) * 1) solid var(--line);
}

#pg-profile .entry:last-child {
  border-bottom: none;
}

#pg-profile .entry:active {
  background: #FBFAF8;
}

#pg-profile .ar {
  color: var(--ink-3);
  font-size: calc(var(--u) * 34);
}

#pg-profile .skel {
  height: calc(var(--u) * 32);
  border-radius: calc(var(--u) * 10);
  background: #F3F0EC;
  margin-bottom: calc(var(--u) * 20);
}

#pg-profile .skel-line {
  width: 70%;
}

#pg-profile .skel-line.short {
  width: 40%;
  margin-bottom: 0;
}

#pg-profile .empty-t {
  font-size: calc(var(--u) * 29);
  font-weight: 600;
  color: var(--ink-2);
}


/* ===== pages/records/records.wxss ===== */
#pg-records .lesson {
  background: var(--card-bg);
  border-radius: calc(var(--u) * 28);
  margin: calc(var(--u) * 28);
  padding: calc(var(--u) * 32) calc(var(--u) * 32) calc(var(--u) * 34);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 28) rgba(120, 90, 60, 0.07);
}

#pg-records .lesson-head {
  display: flex;
  align-items: center;
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
}

#pg-records .ld-date {
  margin-right: calc(var(--u) * 18);
}

#pg-records .ld-cat {
  color: #5A3A26;
  background: var(--tag-bg);
  border-radius: calc(var(--u) * 14);
  padding: calc(var(--u) * 6) calc(var(--u) * 18);
  font-size: calc(var(--u) * 23);
  margin-right: calc(var(--u) * 18);
}

#pg-records .ld-att.absent {
  color: var(--ink-3);
}

#pg-records .lesson-title {
  font-size: calc(var(--u) * 33);
  font-weight: 600;
  margin: calc(var(--u) * 24) 0 calc(var(--u) * 26);
}

#pg-records .none {
  font-size: calc(var(--u) * 26);
  color: var(--ink-3);
  margin: calc(var(--u) * 24) 0 calc(var(--u) * 8);
}

#pg-records .note {
  margin-top: calc(var(--u) * 28);
  background: #FBF8F5;
  border-radius: calc(var(--u) * 22);
  padding: calc(var(--u) * 26) calc(var(--u) * 28);
}

#pg-records .note-lab {
  font-size: calc(var(--u) * 23);
  color: var(--brand);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 12);
}

#pg-records .note-txt {
  font-size: calc(var(--u) * 27);
  line-height: 1.9;
  color: #544439;
}

#pg-records .foot-note {
  text-align: center;
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  padding: calc(var(--u) * 60) 0;
}

#pg-records .skel {
  height: calc(var(--u) * 32);
  border-radius: calc(var(--u) * 10);
  background: #F3F0EC;
  margin-bottom: calc(var(--u) * 20);
}

#pg-records .skel-line {
  width: 70%;
}

#pg-records .skel-line.short {
  width: 40%;
  margin-bottom: 0;
}

#pg-records .empty-t {
  font-size: calc(var(--u) * 29);
  font-weight: 600;
  color: var(--ink-2);
}


/* ===== pages/detail/detail.wxss ===== */
#pg-detail .big {
  width: 100%;
  display: block;
  background: #FFFFFF;
}

#pg-detail .body {
  background: #FFFFFF;
  padding: calc(var(--u) * 36) calc(var(--u) * 40) calc(var(--u) * 20);
}

#pg-detail .meta {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  letter-spacing: calc(var(--u) * 1);
}

#pg-detail .title {
  font-size: calc(var(--u) * 40);
  font-weight: 600;
  margin-top: calc(var(--u) * 20);
}

#pg-detail .note {
  margin-top: calc(var(--u) * 34);
  background: #FBF8F5;
  border-radius: calc(var(--u) * 22);
  padding: calc(var(--u) * 28) calc(var(--u) * 30);
}

#pg-detail .note-lab {
  font-size: calc(var(--u) * 23);
  color: var(--brand);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 14);
}

#pg-detail .note-txt {
  font-size: calc(var(--u) * 28);
  line-height: 2;
  color: #544439;
}

#pg-detail .tip {
  font-size: calc(var(--u) * 23);
  color: var(--ink-3);
  text-align: center;
  padding: calc(var(--u) * 34) 0 calc(var(--u) * 20);
}

#pg-detail .actions {
  display: flex;
  padding: calc(var(--u) * 20) calc(var(--u) * 32) calc(var(--u) * 40);
  background: #FFFFFF;
}

#pg-detail .act {
  flex: 1;
  height: calc(var(--u) * 92);
  border-radius: calc(var(--u) * 26);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 30);
  font-weight: 600;
  line-height: 1;
  padding: 0;
}

#pg-detail .act + .act {
  margin-left: calc(var(--u) * 24);
}

#pg-detail .act.ghost {
  border: calc(var(--u) * 3) solid var(--brand);
  color: var(--brand);
  background: #FFFFFF;
}

#pg-detail .act.fill {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 32) rgba(192, 105, 58, 0.24);
}

#pg-detail .act.fill::after {
  border: none;
}

#pg-detail .state {
  padding: calc(var(--u) * 160) calc(var(--u) * 60);
  text-align: center;
}

#pg-detail .state-t {
  font-size: calc(var(--u) * 29);
  color: var(--ink-2);
  font-weight: 600;
}

#pg-detail .state-s {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-top: calc(var(--u) * 14);
}


/* ===== pages/share/share.wxss ===== */
#pg-share {
  background: #FFFFFF;
}

/* 顶：画室的牌子 */
#pg-share .brand {
  padding: calc(var(--u) * 44) calc(var(--u) * 40) calc(var(--u) * 34);
  text-align: center;
}

#pg-share .mk {
  width: calc(var(--u) * 200);
  display: block;
  margin: 0 auto;
}

/* 作品：像挂在白墙上，四周留出墙的空白 */
#pg-share .stage {
  padding: 0 calc(var(--u) * 44);
}

#pg-share .pic {
  width: 100%;
  display: block;
  border-radius: calc(var(--u) * 10);
  background: #FAF8F6;
  box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(120, 90, 60, 0.16);
}

/* 展签 */
#pg-share .label {
  padding: calc(var(--u) * 48) calc(var(--u) * 52) 0;
}

#pg-share .rule {
  width: calc(var(--u) * 56);
  height: calc(var(--u) * 2);
  background: rgba(192, 105, 58, 0.55);
  margin-bottom: calc(var(--u) * 28);
}

#pg-share .by {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  letter-spacing: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 10);
}

#pg-share .t {
  font-size: calc(var(--u) * 40);
  font-weight: 600;
  color: #2B2B2B;
  letter-spacing: calc(var(--u) * 1);
  line-height: 1.5;
}

#pg-share .meta {
  margin-top: calc(var(--u) * 18);
  font-size: calc(var(--u) * 24);
  color: var(--ink-2);
  letter-spacing: calc(var(--u) * 1);
}

/* 老师的话：引文样式，左边一道竖线 */
#pg-share .quote {
  margin: calc(var(--u) * 46) calc(var(--u) * 52) 0;
  padding-left: calc(var(--u) * 26);
  border-left: calc(var(--u) * 4) solid #E8DED4;
}

#pg-share .q-lab {
  font-size: calc(var(--u) * 23);
  color: var(--brand);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 14);
}

#pg-share .q-txt {
  font-size: calc(var(--u) * 28);
  line-height: 2;
  color: #544439;
}

/* 落款 */
#pg-share .sign {
  margin-top: calc(var(--u) * 68);
  text-align: center;
}

#pg-share .s-name {
  font-size: calc(var(--u) * 26);
  color: #3A2A20;
  letter-spacing: calc(var(--u) * 4);
}

#pg-share .s-slogan {
  margin-top: calc(var(--u) * 14);
  font-size: calc(var(--u) * 22);
  color: var(--ink-3);
  letter-spacing: calc(var(--u) * 2);
}

#pg-share .foot {
  padding: calc(var(--u) * 48) calc(var(--u) * 52) calc(var(--u) * 80);
}

#pg-share .cta {
  height: calc(var(--u) * 92);
  border-radius: calc(var(--u) * 26);
  background: var(--brand);
  color: #FFFFFF;
  font-size: calc(var(--u) * 29);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(192, 105, 58, 0.22);
}

#pg-share .state {
  padding: calc(var(--u) * 200) calc(var(--u) * 60);
  text-align: center;
}

#pg-share .state-t {
  font-size: calc(var(--u) * 29);
  color: var(--ink-2);
  font-weight: 600;
}


/* ===== pages/visit/visit.wxss ===== */
/* 页头沿用全局 .hero / .hero-row / .logo-img / .slogan，保持与首页一致 */

#pg-visit .section {
  padding-top: calc(var(--u) * 44);
}

#pg-visit .sec-title {
  font-size: calc(var(--u) * 32);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: calc(var(--u) * 1);
  padding: 0 calc(var(--u) * 40) calc(var(--u) * 22);
}

#pg-visit .card {
  background: #FFFFFF;
  border-radius: calc(var(--u) * 28);
  margin: 0 calc(var(--u) * 28);
  padding: calc(var(--u) * 32) calc(var(--u) * 34);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 28) rgba(120, 90, 60, 0.07);
}

#pg-visit .para {
  font-size: calc(var(--u) * 27);
  line-height: 1.95;
  color: #544439;
}

#pg-visit .para + .para {
  margin-top: calc(var(--u) * 18);
}

/* 师资 */
#pg-visit .teacher + .teacher {
  margin-top: calc(var(--u) * 24);
}

#pg-visit .t-head {
  display: flex;
  align-items: center;
}

#pg-visit .t-photo {
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  border-radius: calc(var(--u) * 28);
  margin-right: calc(var(--u) * 24);
  background: #F3F0EC;
}

#pg-visit .t-name {
  font-size: calc(var(--u) * 32);
  font-weight: 600;
}

#pg-visit .t-line {
  font-size: calc(var(--u) * 26);
  line-height: 1.85;
  color: var(--ink-2);
  margin-top: calc(var(--u) * 18);
}

/* 作品网格 */
#pg-visit .grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 calc(var(--u) * 28);
}

#pg-visit .grid.four .cell {
  width: calc(25% - calc(var(--u) * 9));
  height: 0;
  padding-bottom: calc(25% - calc(var(--u) * 9));
  position: relative;
  margin: 0 calc(var(--u) * 12) calc(var(--u) * 12) 0;
  border-radius: calc(var(--u) * 12);
  overflow: hidden;
  background: #F3F0EC;
}

#pg-visit .grid.four .cell:nth-child(4n) {
  margin-right: 0;
}

#pg-visit .grid.three .cell {
  width: calc(33.333% - calc(var(--u) * 10));
  height: 0;
  padding-bottom: calc(33.333% - calc(var(--u) * 10));
  position: relative;
  margin: 0 calc(var(--u) * 15) calc(var(--u) * 15) 0;
  border-radius: calc(var(--u) * 14);
  overflow: hidden;
  background: #F3F0EC;
}

#pg-visit .grid.three .cell:nth-child(3n) {
  margin-right: 0;
}

#pg-visit .cell image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 环境 */
#pg-visit .room-img {
  width: 100%;
  border-radius: calc(var(--u) * 18);
  display: block;
  margin-bottom: calc(var(--u) * 24);
  background: #F3F0EC;
}

/* 联系 */
#pg-visit .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: calc(var(--u) * 20) 0;
}

#pg-visit .k {
  font-size: calc(var(--u) * 26);
  color: var(--ink-2);
  flex: none;
  margin-right: calc(var(--u) * 24);
}

#pg-visit .v {
  font-size: calc(var(--u) * 27);
  color: var(--ink);
  text-align: right;
  line-height: 1.7;
}

#pg-visit .link {
  color: var(--brand);
}

#pg-visit .btns {
  display: flex;
  margin-top: calc(var(--u) * 24);
}

#pg-visit .btn {
  flex: 1;
  height: calc(var(--u) * 84);
  border-radius: calc(var(--u) * 22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 28);
  font-weight: 600;
}

#pg-visit .btn + .btn {
  margin-left: calc(var(--u) * 20);
}

#pg-visit .btn.ghost {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(192, 105, 58, 0.24);
}

#pg-visit .btn.line {
  border: calc(var(--u) * 2) solid #E3D8CE;
  color: var(--ink-2);
}

/* 表单 */
#pg-visit .field + .field {
  margin-top: calc(var(--u) * 26);
}

#pg-visit .lb {
  font-size: calc(var(--u) * 25);
  color: var(--ink-2);
  margin-bottom: calc(var(--u) * 14);
}

#pg-visit .req {
  color: var(--brand);
}

#pg-visit .inp {
  height: calc(var(--u) * 88);
  border-radius: calc(var(--u) * 20);
  background: #F8F6F3;
  padding: 0 calc(var(--u) * 26);
  font-size: calc(var(--u) * 28);
  color: var(--ink);
}

#pg-visit .inp.picker {
  display: flex;
  align-items: center;
  color: var(--ink-3);
}

#pg-visit .area {
  width: 100%;
  height: calc(var(--u) * 160);
  border-radius: calc(var(--u) * 20);
  background: #F8F6F3;
  padding: calc(var(--u) * 22) calc(var(--u) * 26);
  font-size: calc(var(--u) * 28);
  color: var(--ink);
  box-sizing: border-box;
}

#pg-visit .ph {
  color: var(--ink-3);
  font-size: calc(var(--u) * 27);
}

#pg-visit .err {
  font-size: calc(var(--u) * 25);
  color: #D54941;
  margin-top: calc(var(--u) * 22);
}

#pg-visit .submit {
  margin-top: calc(var(--u) * 32);
  height: calc(var(--u) * 92);
  border-radius: calc(var(--u) * 26);
  background: var(--brand);
  color: #FFFFFF;
  font-size: calc(var(--u) * 31);
  font-weight: 600;
  letter-spacing: calc(var(--u) * 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 32) rgba(192, 105, 58, 0.26);
}

#pg-visit .privacy {
  font-size: calc(var(--u) * 22);
  color: var(--ink-3);
  text-align: center;
  margin-top: calc(var(--u) * 20);
  line-height: 1.7;
}

#pg-visit .done {
  text-align: center;
  padding: calc(var(--u) * 50) calc(var(--u) * 34);
}

#pg-visit .done-t {
  font-size: calc(var(--u) * 34);
  font-weight: 600;
}

#pg-visit .done-s {
  font-size: calc(var(--u) * 26);
  color: var(--ink-2);
  line-height: 1.9;
  margin-top: calc(var(--u) * 18);
}

#pg-visit .foot {
  text-align: center;
  font-size: calc(var(--u) * 23);
  color: var(--ink-3);
  padding: calc(var(--u) * 56) 0 calc(var(--u) * 70);
  letter-spacing: calc(var(--u) * 1);
}