/* 全站账号（样式）：登录、注册、重设密码，登录后的“我的账号”。
   颜色全走变量，各站在自己的页面里换色：
   --zh-bg 卡底  --zh-ink 字  --zh-mute 淡字  --zh-line 线  --zh-accent 点缀（主站是朱，八字是铜）
   不写的话取主站的 --card / --ink / --ink-mute / --line / --zhu */
.zh-btn {
  font: inherit; font-size: 12.5px; letter-spacing: .18em; color: var(--ink-soft, var(--zh-ink, inherit)); opacity: .86;
  background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.zh-btn:hover, .zh-btn:focus-visible { opacity: 1; }
.zh-btn b { font-weight: 500; color: var(--zh-accent, var(--zhu, currentColor)); letter-spacing: 0; margin-left: 2px; }
.zh-btn[hidden] { display: none; }

.zh-mask {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 15, .38); opacity: 0; transition: opacity .2s ease-out; padding: 16px;
}
.zh-mask.on { opacity: 1; }
.zh-card {
  position: relative; width: 100%; max-width: 420px; max-height: calc(100dvh - 48px); overflow-y: auto; overflow-x: hidden;
  background: var(--zh-bg, var(--card, #FBF8F1)); color: var(--zh-ink, var(--ink, #24221F));
  border: 1px solid var(--zh-line, var(--line, #C9C2B6)); border-radius: 8px; padding: 26px 26px 22px;
  box-shadow: 0 18px 50px rgba(20, 18, 15, .22); font: 400 15px/1.7 var(--sans, system-ui, sans-serif);
  opacity: 0; filter: blur(8px); transform: scale(.95);
  transition: opacity .2s ease-out, filter .26s ease-out, transform .26s cubic-bezier(.2, .8, .2, 1);
  transform-origin: var(--zh-ox, 50%) var(--zh-oy, 50%); overscroll-behavior: contain;
}
.zh-card.wide { max-width: 460px; }
.zh-mask.on .zh-card { opacity: 1; filter: none; transform: none; }
.zh-mask.out { opacity: 0; transition-duration: .16s; }
.zh-mask.out .zh-card { opacity: 0; filter: blur(6px); transform: scale(.97); transition-duration: .16s; transition-timing-function: ease-in; }
.zh-card * { box-sizing: border-box; }
.zh-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; background: none; color: var(--zh-mute, var(--ink-mute, #6B655C)); cursor: pointer; font-size: 20px; line-height: 1; border-radius: 6px; }
.zh-x:hover { color: var(--zh-ink, var(--ink)); }

.zh-card h2 { margin: 0; font: 500 21px/1.4 var(--serif, serif); letter-spacing: .16em; }
.zh-card h3 { margin: 0 0 8px; font: 500 13px/1.5 var(--sans, system-ui); letter-spacing: .2em; color: var(--zh-mute, var(--ink-mute, #6B655C)); }
.zh-cap { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--zh-mute, var(--ink-mute, #6B655C)); }
.zh-gift { margin: 12px 0 0; padding: 8px 12px; border: 1px dashed var(--zh-accent, var(--zhu, #A8453A)); border-radius: 6px; color: var(--zh-accent, var(--zhu, #A8453A)); font-size: 14px; }

.zh-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0 14px; border: 1px solid var(--zh-line, var(--line, #C9C2B6)); border-radius: 6px; overflow: hidden; }
.zh-seg button { font: inherit; font-size: 14px; letter-spacing: .2em; padding: 7px 0; border: 0; background: none; color: var(--zh-mute, var(--ink-mute, #6B655C)); cursor: pointer; transition: background .2s, color .2s; }
.zh-seg button[aria-pressed="true"] { background: rgba(127, 120, 105, .14); color: var(--zh-ink, var(--ink, #24221F)); }

.zh-f { display: grid; gap: 14px; margin-top: 4px; }
.zh-f label { display: grid; gap: 4px; font-size: 13px; color: var(--zh-mute, var(--ink-mute, #6B655C)); letter-spacing: .1em; }
.zh-f input[type=text], .zh-f input[type=email], .zh-f input[type=password], .zh-f input[type=tel] {
  font: inherit; font-size: 16px; /* 16px：手机上不会自动放大 */ letter-spacing: normal; width: 100%; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--zh-line, var(--line, #C9C2B6)); background: transparent; color: var(--zh-ink, var(--ink, #24221F)); outline: none; transition: border-color .2s;
}
.zh-f input:focus { border-color: var(--zh-accent, var(--zhu, #A8453A)); }
.zh-code { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.zh-chk { display: flex !important; grid-template-columns: none; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.7; letter-spacing: 0 !important; }
.zh-chk input { margin-top: 5px; accent-color: var(--zh-accent, var(--zhu, #A8453A)); }
.zh-chk a, .zh-links a, .zh-lk { color: var(--zh-accent, var(--zhu, #A8453A)); }
.zh-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* 按钮：细线框，不用实心深色块 */
.zh-b {
  font: inherit; font-size: 14px; letter-spacing: .16em; padding: 8px 16px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--zh-ink, var(--ink, #24221F)); background: transparent; color: var(--zh-ink, var(--ink, #24221F));
  transition: background .2s, color .2s, border-color .2s, transform .42s cubic-bezier(.4, 0, .2, 1); -webkit-tap-highlight-color: transparent;
}
.zh-b:hover:not(:disabled) { background: rgba(127, 120, 105, .14); }
.zh-b:active:not(:disabled) { transform: scale(.985); transition-duration: .15s; }
/* 断网时的提示：前面一个信号小图，弧一格格闪灭、斜线划过、小点呼吸 */
.zh-err.zh-duan { display: flex; align-items: center; gap: 10px; }
.zh-tu { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; overflow: visible; }
.zh-tu .d { fill: currentColor; stroke: none; transform-origin: 12px 19px; animation: zh-xi 2.2s ease-in-out infinite; }
.zh-tu .h { animation: zh-shan 2.2s ease-in-out infinite; }
.zh-tu .h2 { animation-delay: .2s; } .zh-tu .h3 { animation-delay: .4s; }
.zh-tu .xie { stroke-dasharray: 22; stroke-dashoffset: 22; animation: zh-hua .5s ease .2s forwards; }
@keyframes zh-hua { to { stroke-dashoffset: 0; } }
@keyframes zh-shan { 0%, 100% { opacity: .95; } 50% { opacity: .22; } }
@keyframes zh-xi { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .zh-tu .h, .zh-tu .d { animation-duration: 4.4s; } .zh-tu .xie { animation: none; stroke-dashoffset: 0; } }
.zh-b:disabled { opacity: .5; cursor: default; }
/* 请求进行中：按钮里转一圈（弧在前、淡轨在后，颜色跟字走） */
.zh-b.zh-busy { position: relative; opacity: .85; }
.zh-b.zh-busy::before { content: ""; display: inline-block; width: 13px; height: 13px; margin: -2px 8px -2px 0; vertical-align: middle; box-sizing: border-box; border-radius: 50%; border: 1.5px solid currentColor; border-color: currentColor transparent transparent currentColor; opacity: .9; animation: zh-spin .8s linear infinite; }
@keyframes zh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .zh-b.zh-busy::before { animation-duration: 2.4s; } }
.zh-b.main { width: 100%; padding: 10px 16px; border-color: var(--zh-accent, var(--zhu, #A8453A)); color: var(--zh-accent, var(--zhu, #A8453A)); }
.zh-b.soft { border-color: var(--zh-line, var(--line, #C9C2B6)); color: var(--zh-mute, var(--ink-mute, #6B655C)); padding: 6px 12px; font-size: 13px; }
.zh-lk { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.zh-lk:hover { text-decoration: underline; text-underline-offset: 3px; }
.zh-b:focus-visible, .zh-lk:focus-visible, .zh-x:focus-visible, .zh-seg button:focus-visible, .zh-btn:focus-visible { outline: 2px solid var(--zh-accent, var(--zhu, #A8453A)); outline-offset: 2px; }
.zh-err { margin: 0; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--zh-accent, var(--zhu, #A8453A)); border: 1px solid var(--zh-accent, var(--zhu, #A8453A)); background: rgba(168, 69, 58, .06); }
.zh-ok { margin: 0; font-size: 13px; color: var(--zh-mute, var(--ink-mute, #6B655C)); }

/* 我的账号 */
.zh-who { margin: 2px 0 0; overflow-wrap: anywhere; }
.zh-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--zh-line, var(--line, #C9C2B6)); }
.zh-bal { display: flex; gap: 28px; flex-wrap: wrap; align-items: baseline; }
.zh-bal span { display: grid; font-size: 13px; color: var(--zh-mute, var(--ink-mute, #6B655C)); }
.zh-bal b { font: 500 28px/1.2 var(--serif, serif); color: var(--zh-accent, var(--zhu, #A8453A)); font-variant-numeric: tabular-nums; }
.zh-bal em { font-style: normal; font-size: 13px; margin-left: 2px; color: var(--zh-mute, var(--ink-mute)); }
.zh-prog { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.zh-prog i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--zh-mute, var(--ink-mute, #6B655C)); transition: background .2s, border-color .2s; }
.zh-prog i.on { background: var(--zh-accent, var(--zhu, #A8453A)); border-color: var(--zh-accent, var(--zhu, #A8453A)); }
.zh-prog span { margin-left: 4px; font-size: 14px; }
.zh-link { margin: 0 0 10px; padding: 6px 10px; border: 1px solid var(--zh-line, var(--line, #C9C2B6)); border-radius: 6px; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; user-select: all; -webkit-user-select: all; }
.zh-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.zh-set { display: grid; gap: 0; }
.zh-set > .zh-item { border-top: 1px solid var(--zh-line, var(--line, #C9C2B6)); }
.zh-set > .zh-item:first-child { border-top: 0; }
.zh-item > button.zh-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; font: inherit; font-size: 15px; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.zh-item > button.zh-head span { font-size: 13px; color: var(--zh-mute, var(--ink-mute, #6B655C)); overflow-wrap: anywhere; text-align: right; }
.zh-item > button.zh-head::after { content: "›"; font-size: 18px; color: var(--zh-mute, var(--ink-mute)); transition: transform .24s cubic-bezier(.2, .8, .2, 1); margin-left: 4px; }
.zh-item.open > button.zh-head::after { transform: rotate(90deg); }
.zh-item .zh-body { display: none; padding: 2px 0 16px; }
.zh-item.open .zh-body { display: block; }
.zh-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.zh-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--zh-line, var(--line, #C9C2B6)); }

/* 手机：从底部升起，和日期选择面板一致 */
@media (max-width: 640px) {
  .zh-mask { align-items: flex-end; padding: 0; }
  .zh-card, .zh-card.wide { max-width: 520px; max-height: 90dvh; border-radius: 14px 14px 0 0; border-bottom: 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); filter: none; transform: translateY(40px); }
  .zh-mask.on .zh-card { transform: none; }
  .zh-mask.out .zh-card { filter: none; transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .zh-mask, .zh-card, .zh-b, .zh-item > button.zh-head::after { transition: opacity .01s !important; transform: none !important; filter: none !important; }
}
.zh-note {
  position: fixed; left: 50%; bottom: 28px; z-index: 1001; transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 8px 16px; border-radius: 6px; font-size: 14px; background: var(--zh-bg, var(--card, #FBF8F1)); color: var(--zh-ink, var(--ink, #24221F));
  border: 1px solid var(--zh-line, var(--line, #C9C2B6)); box-shadow: 0 6px 18px rgba(20, 18, 15, .14); animation: zh-note-in .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes zh-note-in { from { opacity: 0; transform: translate(-50%, 6px); } }