/* p-account.css — 驭火账号：登录页（/account/login/）和我的账号（/account/），2026-10-22。全站组件在 fyro.css；
 * 首屏左边标题和一句导语，右边一张卡，手机上上下排（同 p-pay.css）；卡片、输入框照 lead.css 的在线咨询表单卡：
 * 白卡、细边、贴近的淡影；输入框聚焦时边框变墨色、外面一圈很淡的朱色；没过校验的边框变朱色（aria-invalid，account.js 打上）。
 * 微信二维码是微信给的 iframe，放在卡片中间一块固定的 300×240 里，不加边框（Leon 10-22：先试了单独一张小卡，「两个卡片叠放怪怪的」）；
 * 框里只有二维码或快速登录的头像和按钮，上下居中、颜色照微信原样，见 wx-login.css；已取消时最高，约 233。加载、过期、已确认时这块上面盖一层白底和一句话。
 * 10-22 晚 Leon 定：卡片顶上一条登录方式的 tab（微信扫码｜验证码｜密码），占满卡片内容宽、等分；没选的字 --ink-soft，选中的 --ink、下面一道 2px 墨线，
 * 整条下面一道细线。没有朱红，绿只在微信自己的框里。有 tab 的几块不再有标题，扫码那块只剩 300×240 的二维码区。 */

.acct-hero .page-hero-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px clamp(32px, 6vw, 88px); align-items: start; }
.acct-hero .page-hero-text { padding-top: 8px; }
.acct-back { margin-top: 12px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }   /* 单点登录：标题下面「登录后回到 火力坊」（10-27 A2） */
@media (max-width: 899px) {
  .acct-hero .page-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .acct-hero { padding-top: clamp(32px, 7vw, 52px); }
}

.acct-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-2xl);
  background: var(--sheet);
  background-image: var(--surface-card);
  box-shadow: var(--shadow-window);   /* 10-26 质感版：窗口的材质，同样稿的登录卡、收银台 */
}
.acct-card[data-acct-me] { max-width: 540px; }
.acct-card [hidden] { display: none !important; }
.acct-panel { display: grid; gap: 16px; }
.acct-title { font-family: var(--head); font-size: 20px; font-weight: var(--w-title); line-height: 1.4; letter-spacing: var(--track-title); color: var(--ink); }
.acct-title:focus, .acct-state:focus { outline: none; }
.acct-note { font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.acct-alt { font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.acct-state { font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.acct-alert {
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid rgb(var(--accent-rgb) / 0.24);
  border-radius: var(--r-lg);
  background: rgb(var(--accent-rgb) / 0.05);
  font-size: 14px;
  line-height: 1.7;
  color: var(--rouge);   /* 出错色胭脂：夜里朱字压在卡片上只有 4.4:1 */
}
.acct-wide { width: 100%; justify-content: center; }
.acct-wide svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }  /* 微信的标志是实心的 */
.acct-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 4px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .acct-link:hover { text-decoration-color: currentColor; } }

/* 登录方式的 tab */
/* 登录方式的切换：10-26 质感版照样稿的分段切换 .seg（一条凹下去的槽，选中的那格浮起一枚纸键，材质同 --surface-raised / --shadow-raise）；
   原来是一排字、选中的下面一道 2px 墨线。这里没有滑块，选中的那格自己画键，切换时直接换 */
.acct-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 24px; padding: 4px; border: 1px solid var(--edge-soft); border-radius: var(--r-lg); background: var(--paper-2); background-image: var(--surface-well); box-shadow: var(--shadow-well); }
.acct-tab {
  position: relative;
  min-height: 40px;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: var(--w-strong);
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-base) ease-out, background-color var(--t-base) ease-out;
}
.acct-tab[aria-selected="true"] { border-color: var(--edge-strong); background: var(--sheet); background-image: var(--surface-raised); box-shadow: var(--shadow-raise); color: var(--ink); cursor: default; }
@media (hover: hover) and (pointer: fine) { .acct-tab:not([aria-selected="true"]):hover { color: var(--ink); background-color: var(--wash); } }
.acct-tab:not([aria-selected="true"]):active { background-color: var(--key-ghost-well); }
.acct-tab:focus-visible { outline-offset: 2px; }
@media (max-width: 379px) { .acct-tab { padding-inline: 2px; font-size: 13.5px; } }

/* 微信二维码 */
.acct-qr { position: relative; width: 100%; max-width: 300px; height: 240px; margin: 0 auto; overflow: hidden; }
.acct-qr iframe { display: block; width: 100%; height: 100%; border: 0; }
.acct-qr-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: var(--sheet);
  text-align: center;
}
.acct-qr-text { max-width: 16em; font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }

/* 表单 */
.acct-form { display: grid; gap: 16px; }
.acct-stack { display: grid; gap: inherit; }  /* 一起显示、隐藏的几栏（设置新密码里的短信验证码），间距跟着表单 */
.acct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 479px) { .acct-row { grid-template-columns: minmax(0, 1fr); } }
.acct-field { display: grid; gap: 7px; min-width: 0; }
.acct-label { display: block; font-size: 13.5px; font-weight: var(--w-strong); color: var(--ink-2); }
.acct-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acct-forgot { font-size: 13.5px; color: var(--ink-soft); }
.acct-hint { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.acct-hint.bad { color: var(--rouge); }   /* 出错的话用色板的出错色胭脂（--rouge）：夜里朱字压在卡片上只有 4.4:1，胭脂 5.2:1；昼里两个色几乎一样（10-26 W2） */
.acct-opt { margin-left: 8px; font-size: 12.5px; font-weight: 400; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.acct-field input {
  width: 100%;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--field);
  box-shadow: var(--shadow-well);   /* 凹下去的格（ui.css 的 .input） */
  color: var(--ink);
  font: inherit;
  font-size: 16px;  /* 不小于 16px：iPhone 聚焦时不放大页面 */
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.acct-field input::placeholder { color: var(--muted); color: color-mix(in srgb, var(--muted) 80%, transparent); }
.acct-field input:focus { outline: none; border-color: var(--ink-soft); box-shadow: var(--shadow-well), var(--field-ring); }
.acct-field input[aria-invalid="true"] { border-color: var(--accent); box-shadow: var(--shadow-well), 0 0 0 3px rgb(var(--accent-rgb) / 0.14); }
.acct-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
/* 密码框：右边一个显示、隐藏密码的小眼睛（按下是显示；没按时眼睛上一道斜线） */
.acct-pass { position: relative; }
.acct-field .acct-pass input { padding-right: 48px; }
.acct-pass input::-ms-reveal { display: none; }
.acct-eye {
  position: absolute;
  top: 50%;
  right: 4px;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-base) ease-out, background-color var(--t-base) ease-out;
}
.acct-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.acct-eye[aria-pressed="true"] .acct-eye-off { display: none; }
@media (hover: hover) and (pointer: fine) { .acct-eye:hover { color: var(--ink); background: var(--wash); } }
.acct-eye:focus-visible { outline-offset: -2px; }
.acct-send { min-width: 116px; font-variant-numeric: tabular-nums; }
.acct-send[disabled] { color: var(--muted); cursor: default; }
.acct-checks { display: grid; gap: 4px; }
.acct-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.75; color: var(--ink-2); cursor: pointer; }
.acct-check input { flex: none; width: 17px; height: 17px; margin: 4px 0 0; accent-color: var(--cinnabar); cursor: pointer; }
.acct-check input[aria-invalid="true"] { outline: 2px solid var(--cinnabar); outline-offset: 2px; }
html.pointer-input .acct-check input[aria-invalid="true"] { outline: 2px solid var(--cinnabar) !important; }  /* 触屏、鼠标操作时全站去掉焦点框，这个朱色报错框不是焦点框，加回来 */
.acct-msg { font-size: 14px; line-height: 1.75; color: var(--ink-soft); }
.acct-msg.bad { color: var(--rouge); }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.acct-form button[type="submit"][disabled] { opacity: 0.7; cursor: progress; }

/* 登录成功：一个一笔画出来的勾（同在线咨询；减少动态效果时直接画好） */
.acct-panel[data-panel="done"] { justify-items: center; padding-block: 28px 12px; text-align: center; }
/* 勾是一枚浮起的小圆钮（同收银台的 .pay-mark，样稿 .ticks .tick 放大） */
.acct-mark { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--edge-strong); border-radius: 50%; background: var(--sheet); background-image: var(--surface-raised); box-shadow: var(--shadow-raise); color: var(--accent-text); }
.acct-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28; animation: acct-tick 520ms var(--ease) 120ms backwards; }
@keyframes acct-tick { from { stroke-dashoffset: 28; } }
@media (prefers-reduced-motion: reduce) { .acct-mark svg { animation: none; } }

/* 我的账号：一张卡分几段，段与段之间一条细线 */
.acct-sec { display: grid; gap: 14px; padding-block: 22px; border-top: 1px solid var(--edge-soft); }
.acct-sec:first-child { padding-top: 0; border-top: 0; }
.acct-sec:last-child { padding-bottom: 0; }
.acct-sec-title { font-size: 15px; font-weight: var(--w-title); letter-spacing: var(--track-tight); color: var(--ink); }
/* 登录方式：一行一样，左边名目、中间状态、右边能做的事；点开的小表单在那一行下面，和状态对齐 */
.acct-ways { display: grid; gap: 4px; }
.acct-way { display: grid; grid-template-columns: 4em minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding-block: 3px; font-size: 14.5px; line-height: 1.75; }
.acct-way-k { color: var(--muted); }
.acct-way-v { min-width: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.acct-way-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; }
.acct-way-act .acct-link { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .acct-way-act .acct-link:hover { color: var(--ink); } }
.acct-sub { display: grid; gap: 14px; padding: 8px 0 14px calc(4em + 14px); }
@media (max-width: 479px) { .acct-sub { padding-left: 0; } }
.acct-danger > .acct-link { justify-self: start; color: var(--rouge); text-decoration-color: currentColor; text-decoration-thickness: 1px; }   /* 注销：同 ui.css 的 .btn-danger 用出错色 */
.acct-del { padding-top: 4px; }
.acct-del-btn { --k-text: var(--rouge); }   /* 纸键、出错色的字 */
.acct-panel[data-panel="bye"] { justify-items: start; }

@media (max-width: 479px) {
  .acct-card { padding: 20px 18px; }
  .acct-send { min-width: 104px; padding-inline: 12px; }
}