/* ============================================================
   声悦健 —— 在设计稿样式之上补的部分
   （转账收据、预约空状态等 —— 设计稿没有这些元件）
   ============================================================ */

/* ---------- 转账 + 上传收据 ---------- */
.transfer-box{margin-top:.9rem}

.transfer-bank{
  display:grid;grid-template-columns:auto 1fr;gap:.45rem .9rem;
  margin:0 0 .9rem;padding:.9rem 1rem;
  background:var(--mint);border-radius:16px;
}
.transfer-bank dt{color:var(--muted);font-size:.82rem}
.transfer-bank dd{margin:0;font-size:.9rem;word-break:break-all}
.transfer-bank dd b{font-size:1.05rem;letter-spacing:.04em}

.transfer-copy{
  width:100%;margin-bottom:.9rem;padding:.6rem;
  border:1px solid var(--line);border-radius:14px;
  background:var(--paper);color:var(--ink);
  font:inherit;font-size:.86rem;cursor:pointer;
}
.transfer-copy:hover{border-color:var(--gold);color:var(--gold)}

.transfer-file{
  display:block;padding:.9rem 1rem;
  border:1px dashed rgba(19,34,29,.25);border-radius:16px;
  background:var(--paper);cursor:pointer;
}
.transfer-file span{display:block;font-size:.84rem;color:var(--muted);margin-bottom:.5rem}
.transfer-file input{width:100%;font:inherit;font-size:.82rem}

.transfer-note{margin:.7rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.6}
.transfer-note.is-error{color:#a8433a}
.transfer-warn{
  margin:0 0 .9rem;padding:.75rem .9rem;border-radius:14px;
  background:#fdf3e6;color:#8a5a1c;font-size:.84rem;
}

/* ---------- 预约：无可选时段 ---------- */
.time-empty{
  grid-column:1/-1;margin:0;padding:1rem;text-align:center;
  color:var(--muted);font-size:.86rem;
}
.date-strip .date[disabled]{opacity:.35;cursor:not-allowed}
.time-grid button[disabled]{opacity:.35;cursor:not-allowed}

/* ============================================================
   商城
   ============================================================ */
.shop-tabs{display:flex;gap:.5rem;margin:0 0 1.1rem;overflow-x:auto;padding-bottom:.2rem}
.shop-tabs button{
  flex:0 0 auto;padding:.45rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);
  color:var(--muted);font:inherit;font-size:.84rem;cursor:pointer;transition:.16s;
}
.shop-tabs button.active{
  background:var(--forest);border-color:var(--forest);color:#fff;
}

.shop-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}

.shop-card{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
}
.shop-cover{
  aspect-ratio:4/3;background:var(--mint);
  display:grid;place-items:center;overflow:hidden;
}
.shop-cover img{width:100%;height:100%;object-fit:cover}
.shop-cover-fallback{
  font-size:.9rem;color:var(--muted);letter-spacing:.2em;
}
.shop-body{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;flex:1}
.shop-kind{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:600;
}
.shop-body h3{margin:.3rem 0 .2rem;font-size:.95rem;line-height:1.4}
.shop-body p{margin:0 0 .5rem;font-size:.79rem;color:var(--muted);line-height:1.5}
.shop-price{display:flex;align-items:baseline;gap:.45rem;margin:auto 0 .7rem}
.shop-price b{font-size:1.15rem;color:var(--forest)}
.shop-price del{font-size:.78rem;color:var(--muted)}
.shop-body button{
  width:100%;padding:.55rem;border:0;border-radius:12px;
  background:var(--forest);color:#fff;font:inherit;font-size:.84rem;cursor:pointer;
}
.shop-body button:hover{background:var(--forest-2)}

.shop-empty{
  grid-column:1/-1;margin:0;padding:2.4rem 1rem;text-align:center;
  color:var(--muted);font-size:.88rem;
}

/* ============================================================
   关于我们
   ============================================================ */
.about-card{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:1.4rem 1.3rem;margin-bottom:1rem;box-shadow:var(--shadow);
}
.about-card h2{
  margin:0 0 .7rem;font-size:1.1rem;
  font-family:Georgia,"Songti SC",serif;
}
.about-card p{margin:0 0 .8rem;font-size:.9rem;line-height:1.75;color:var(--ink-soft)}
.about-card p:last-child{margin-bottom:0}
.about-card img{border-radius:16px;margin:.5rem 0}

.contact-list{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1rem;margin:0}
.contact-list dt{color:var(--muted);font-size:.84rem}
.contact-list dd{margin:0;font-size:.9rem;word-break:break-word}
.contact-list dd a{color:var(--forest);text-decoration:none;border-bottom:1px solid var(--gold-light)}
.contact-list dd a:hover{color:var(--gold)}

/* ============================================================
   登录 / 注册 独立页
   ============================================================ */
body.auth-page{
  min-height:100vh;display:grid;place-items:center;
  padding:2rem 1.1rem;background:#e9eee9;
}
.auth-shell{width:min(430px,100%)}

.auth-brand{
  display:flex;align-items:center;gap:.7rem;justify-content:center;
  margin-bottom:1.3rem;text-decoration:none;color:var(--ink);
}
.auth-brand img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.auth-brand b{display:block;font-size:1.05rem;letter-spacing:.04em}
.auth-brand small{display:block;font-size:.7rem;color:var(--muted)}

.auth-card{
  background:var(--paper);border:1px solid var(--line);border-radius:26px;
  padding:1.8rem 1.5rem;box-shadow:var(--shadow);
}
.auth-card h1{
  margin:0 0 .3rem;font-size:1.3rem;
  font-family:Georgia,"Songti SC",serif;
}
.auth-card .auth-sub{margin:0 0 1.4rem;font-size:.86rem;color:var(--muted)}

.auth-field{margin-bottom:1rem}
.auth-field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.35rem}
.auth-field input{
  width:100%;padding:.72rem .9rem;border:1px solid var(--line);border-radius:14px;
  font:inherit;font-size:.92rem;background:#fcfcfa;color:var(--ink);
}
.auth-field input:focus{outline:0;border-color:var(--gold);background:#fff}
.auth-field .auth-hint{margin-top:.3rem;font-size:.76rem;color:var(--muted)}

.auth-check{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:1.2rem;font-size:.82rem;color:var(--muted)}
.auth-check input{margin-top:.2rem;flex:0 0 auto}

.auth-submit{
  width:100%;padding:.85rem;border:0;border-radius:16px;
  background:var(--forest);color:#fff;font:inherit;font-size:.95rem;
  font-weight:600;cursor:pointer;transition:.16s;
}
.auth-submit:hover{background:var(--forest-2)}
.auth-submit:disabled{opacity:.6;cursor:not-allowed}

.auth-alt{margin:1.2rem 0 0;text-align:center;font-size:.85rem;color:var(--muted)}
.auth-alt a{color:var(--forest);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold-light)}

.auth-msg{
  margin:0 0 1rem;padding:.7rem .9rem;border-radius:14px;
  font-size:.84rem;background:#fdecea;color:#a8433a;
}
.auth-msg.is-ok{background:#e8f3ec;color:#2a6b45}

.auth-foot{margin:1.2rem 0 0;text-align:center;font-size:.82rem}
.auth-foot a{color:var(--muted);text-decoration:none}

/* 未登录时的提示卡 */
.guest-gate{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:1.6rem 1.4rem;text-align:center;box-shadow:var(--shadow);
}
.guest-gate h2{margin:0 0 .4rem;font-size:1.05rem;font-family:Georgia,"Songti SC",serif}
.guest-gate p{margin:0 0 1.1rem;font-size:.86rem;color:var(--muted);line-height:1.7}
.guest-gate .gate-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.guest-gate a{
  padding:.6rem 1.3rem;border-radius:14px;text-decoration:none;
  font-size:.87rem;font-weight:600;
}
.guest-gate a.primary{background:var(--forest);color:#fff}
.guest-gate a.ghost{border:1px solid var(--line);color:var(--ink)}

/* 未登录：锁住的分页 */
.bottom-nav button.is-locked{opacity:.45}
.bottom-nav button.is-locked::after{
  content:'';position:absolute;top:8px;right:calc(50% - 18px);
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.bottom-nav button{position:relative}

/* 未登录：会员卡上的登出连结 */
.profile-logout{margin:0 0 .6rem;text-align:right;font-size:.82rem}
.profile-logout a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.profile-logout a:hover{color:#a8433a}

/* ============================================================
   音乐播放器
   ============================================================ */
.track-cats{display:flex;gap:.5rem;margin:0 0 .9rem;overflow-x:auto;padding-bottom:.2rem}
.track-cats button{
  flex:0 0 auto;padding:.4rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);
  color:var(--muted);font:inherit;font-size:.82rem;cursor:pointer;transition:.16s;
}
.track-cats button.active{background:var(--forest);border-color:var(--forest);color:#fff}

.track.is-active{border-color:var(--gold);background:var(--mint)}
.track.is-active b{color:var(--forest)}
.track.is-locked{opacity:.6}
.track.is-locked em{filter:grayscale(1)}

/* 迷你播放器：进度条 */
.mini-meta{min-width:0}
.mini-meta small{display:block;font-size:.68rem;opacity:.7;font-variant-numeric:tabular-nums}
.mini-meta b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-progress{
  display:block;margin-top:5px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.22);overflow:hidden;
}
.mini-progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s linear}
.mini-player.paused .mini-bars{opacity:.3}

.featured-player button:disabled{opacity:.5;cursor:not-allowed}

/* 我的 → 语言切换 */
.menu-list .menu-lang{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:.9rem 1rem;text-decoration:none;color:var(--ink);
  font:inherit;font-size:.92rem;border-top:1px solid var(--line);
}
.menu-list .menu-lang em{font-style:normal;color:var(--muted)}

/* ============================================================
   法定页面（关于我们／联系我们／退款／条款／隐私）
   ============================================================ */
body.legal-page{margin:0;background:var(--cream);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}

.legal-header{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem max(1rem, calc((100% - 820px) / 2));
  background:rgba(247,245,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.legal-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);min-width:0}
.legal-brand img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 38px}
.legal-brand b{display:block;font-size:.98rem}
.legal-brand small{display:block;font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legal-actions{display:flex;gap:.5rem;align-items:center;flex:0 0 auto}
.legal-lang{font-size:.82rem;color:var(--muted);text-decoration:none;padding:.35rem .6rem}
.legal-app{font-size:.82rem;text-decoration:none;color:#fff;background:var(--forest);padding:.42rem .9rem;border-radius:12px}

.legal-main{flex:1;width:100%;max-width:820px;margin:0 auto;padding:1.6rem 1rem 2.5rem;box-sizing:border-box}
.legal-article{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:1.8rem 1.4rem;box-shadow:var(--shadow)}
.legal-article h1{margin:0 0 .3rem;font-size:1.55rem;font-family:Georgia,"Songti SC",serif;line-height:1.3}
.legal-updated{margin:0 0 1.4rem;font-size:.8rem;color:var(--muted)}
.legal-body{font-size:.94rem;line-height:1.8;color:var(--ink-soft)}
.legal-body h3{margin:1.6rem 0 .5rem;font-size:1.02rem;color:var(--ink)}
.legal-body p{margin:0 0 .9rem}
.legal-body ul{margin:0 0 1rem;padding-left:1.25rem}
.legal-body li{margin-bottom:.4rem}
.legal-body a{color:var(--forest)}
.legal-body code{font-size:.85em;background:var(--mint);padding:.05rem .3rem;border-radius:5px}

.contact-card-legal{display:grid;grid-template-columns:auto 1fr;gap:.9rem 1.2rem;margin:1.4rem 0 0;
  padding:1.2rem;background:var(--mint);border-radius:16px}
.contact-card-legal dt{font-size:.82rem;color:var(--muted);font-weight:600}
.contact-card-legal dd{margin:0;font-size:.92rem;line-height:1.7;word-break:break-word}
.contact-card-legal a{color:var(--forest)}
@media (max-width:480px){
  .contact-card-legal{grid-template-columns:1fr;gap:.2rem}
  .contact-card-legal dd{margin-bottom:.7rem}
  .legal-brand small{display:none}
}

/* 共用页尾 */
.legal-footer{padding:1.6rem 1rem 2rem;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.7}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.1rem;margin-bottom:.9rem}
.legal-links a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.legal-links a:hover{color:var(--forest)}
.legal-co{margin:0 0 .3rem}
.legal-co b{display:block;color:var(--ink);font-size:.84rem}
.legal-contact{margin:0 0 .5rem;display:flex;flex-direction:column;gap:.1rem}
.legal-contact a{color:var(--muted)}
.legal-copy{margin:0;font-size:.74rem}

/* App 首页内的页尾：要让出底部导航的空间 */
#view-home .legal-footer{margin-top:1.5rem;padding-bottom:1rem;border-top:1px solid var(--line)}
.auth-check a{color:var(--forest)}

/* Visible, restrained bilingual navigation. */
.language-switch{display:flex;align-items:center;flex-shrink:0;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(19,34,29,.04)}
.language-switch a{display:grid;place-items:center;min-width:44px;min-height:38px;padding:0 12px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);transition:background .18s,color .18s}
.language-switch a:hover{color:var(--ink);background:rgba(255,255,255,.65)}
.language-switch a[aria-current]{background:var(--ink);color:#fff}
html[lang=en] .brand b{letter-spacing:-.035em}
html[lang=en] .announcement-copy h2{font-size:clamp(26px,3.4vw,39px)}
html[lang=en] .member-card h2{font-size:clamp(26px,3.5vw,38px)}
@media(max-width:600px){.topbar{padding:0 16px;gap:10px}.brand{gap:8px;padding:0;min-width:0}.brand b{font-size:16px}.brand small{font-size:8px}.brand-logo{width:32px;height:32px}.top-actions{gap:6px}.top-actions>.icon-btn{display:none}.language-switch a{min-width:40px;padding:0 8px}.top-actions>.avatar{width:34px;height:34px;font-size:11px}html[lang=en] .announcement-copy{max-width:90%}html[lang=en] .announcement-copy h2{font-size:27px}}
@media(max-width:360px){.topbar{padding:0 12px}.brand small{display:none}.brand b{font-size:14px}.language-switch a{min-width:36px;padding:0 6px}}

@media(max-width:600px){.teacher-gallery figure{flex:0 0 min(78vw,310px)}.teacher-gallery figcaption span{line-height:1.5}}

/* ============================================================
   付款：自动续费同意 + 我的 → 自动续费卡
   ============================================================ */
.renew-consent{
  display:flex;gap:.65rem;align-items:flex-start;margin:1rem 0 .4rem;padding:.9rem 1rem;
  border:1px solid var(--line);border-radius:16px;background:var(--mint);cursor:pointer;
  font-size:.82rem;line-height:1.6;color:var(--ink-soft);
}
.renew-consent.is-required{border-color:var(--gold)}
.renew-consent input{margin-top:.25rem;flex:0 0 auto;width:18px;height:18px;accent-color:var(--forest)}
.renew-consent b{display:block;color:var(--ink);font-size:.86rem;margin-bottom:.15rem}
.renew-consent small{display:block;margin-top:.3rem;color:var(--muted);font-size:.74rem}

.sub-card{
  margin:1rem 0;padding:1.1rem 1.2rem;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);
}
.sub-card h3{margin:.2rem 0 .35rem;font-size:1rem}
.sub-card p{margin:0 0 .3rem;font-size:.86rem;color:var(--ink-soft)}
.sub-card .sub-meta{color:var(--muted);font-size:.8rem}
.sub-card.is-past-due{border-color:#e7b7b0}
.sub-cancel{
  margin-top:.6rem;padding:.5rem .9rem;border:1px solid var(--line);border-radius:12px;
  background:transparent;color:var(--ink-soft);font:inherit;font-size:.82rem;cursor:pointer;
}
.sub-cancel:hover{border-color:#a8433a;color:#a8433a}