/* ============================================================
   登录 / 注册页（#page-auth）
   布局与动画参照 登录注册.html，宽度不做固定 390px，
   跟随 app 的 .page 全屏自适应（内部用 % / cqw / clamp 缩放）。
   色彩变量继承 style.css（含夜间变量切换）。
   ============================================================ */

#page-auth{z-index:60}

/* 滚动区：内容整体垂直居中。
   用 flex + auto 外边距（而不是 justify-content:center）——
   内容超过视口时 auto 外边距收敛为 0，顶部不会被裁掉，滚动依旧正常。 */
.auth-scroll{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  /* 横向留白下放到各视图（.auth-view）：chooser 仍 7cqw，
     邮箱登录 / 注册跟随全站 5cqw —— 卡片左右边线与其它页对齐 */
  padding:3cqh 0;   /* 底部协议行已移出滚动区，这里不用留大底距 */
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.auth-scroll::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- 头部 ---------- */
/* 左上角返回按钮（复用回收站页的 trash-back 样式）：
   绝对定位、脱离文档流——滚动区从整页顶部起算，内容才能真正垂直居中；
   否则按钮会占掉顶部一段高度，整块内容被压得偏下。
   横向与全站页边线对齐（5cqw）。注意 .trash-back 自带 margin-left:-8px，
   abs 定位下这个负边距仍会叠加到 left 上 —— 这里再减 8px 就会多左移一截。 */
.auth-back{
  position:absolute;
  /* absolute 的定位起点是父级 border box 内缘，.page 的 padding-top:--sf-sat
     管不到它 —— 不补状态栏高度的话，返回箭头会顶进状态栏和时间/电量重叠
     （真机上看就是「登录页没有沉浸式避让」）。写法对齐 style.css 预览层那几处。 */
  top:calc(var(--sf-sat, env(safe-area-inset-top, 0px)) + 14px);
  left:5cqw;
  z-index:3;
}

/* 登录页不再放标题文字（SAME FRAME / 欢迎回来 / 副标题）：
   品牌信息交给 chooser 顶部那枚 logo，页面直接从图形开始。 */

/* ---------- 品牌标记（与「关于」页同一枚，白底圆角方卡、无投影） ---------- */
.auth-logo-wrap{
  width:min(100%, var(--auth-col, 360px));
  margin:0 auto 2.4cqh;
  display:flex;justify-content:center;
}
.auth-logo{
  width:calc(clamp(68px,19cqw,84px) * var(--fs));
  height:auto;
  overflow:visible;
}

/* logo 下方的品牌名与标语：黑体（工具层），字距 + 等量 text-indent 让居中不偏 */
.auth-brand-text{
  width:min(100%, var(--auth-col, 360px));
  margin:0 auto 4.6cqh;
  text-align:center;
}
.auth-brand-name{
  font-family:var(--font-sans);
  font-size:calc(clamp(20px,5.4cqw,24px) * var(--fs));
  font-weight:600;
  letter-spacing:.3em;text-indent:.3em;
  line-height:1.25;
  color:var(--ink);
}
.auth-brand-slogan{
  margin-top:7px;
  font-family:var(--font-sans);
  font-size:calc(clamp(11px,2.8cqw,12.5px) * var(--fs));
  letter-spacing:.2em;text-indent:.2em;
  color:var(--ink-3);
}

/* ---------- 表单卡片（账号流程页 pwd-change / pwd-forgot / del-account 仍复用；
   登录页本体已改用 auth-fieldbox 描边风格，见下方「登录.html 布局」段） ---------- */

/* ---------- 表单卡片 ---------- */
.auth-card{
  background:var(--card-bg);
  border:none;              /* 不描边：卡面用一层极淡投影浮起来，字段靠留白分组 */
  border-radius:16px;       /* 与「我的」页设置卡同档圆角 */
  box-shadow:var(--card-shadow);
  overflow:hidden;
  transition:background .35s, border-color .35s;
}

/* 每个字段：收起/展开走 grid-template-rows 动画（与 登录注册.html 同款） */
.auth-field{
  position:relative;
  display:grid;
  grid-template-rows:1fr;
  padding:16px;
  transition:
    grid-template-rows .34s cubic-bezier(.22,1,.36,1),
    padding .34s cubic-bezier(.22,1,.36,1),
    opacity .24s ease;
}
.auth-field-inner{overflow:hidden;min-height:0}

/* 字段之间的分隔细线（第一条可见字段不画）
   原来 1px + .08 在手机上显成一道"粗黑线"，这里收回半像素，颜色也压到最浅，
   和设置列表的发丝线同档；夜间由 --card-border 自动换成低透明度白 */
.auth-field::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;
  height:.5px;
  background:var(--card-border);
  transition:opacity .2s ease;
  pointer-events:none;
}
.auth-field:first-child::before,
.auth-field.first-visible::before,
.auth-field.collapsed::before{opacity:0}

.auth-field.collapsed{
  grid-template-rows:0fr;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  pointer-events:none;
}

.auth-input{
  display:block;
  width:100%;
  height:28px;
  background:none;
  border:none;
  outline:none;
  font-family:var(--font-sans);   /* 字体分层（table.csv）：输入框属工具层，切黑体 */
  font-size:calc(clamp(14px,3.6cqw,16px) * var(--fs));
  letter-spacing:.04em;
  color:var(--ink);
  transition:color .2s;
}
.auth-input::placeholder{color:var(--ink-3);letter-spacing:.02em}
.auth-input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--card-bg) inset;
}

/* 密码框的「显示 / 隐藏」开关：贴在输入行右端
   不套框、不加底色 —— 卡片本身无框，这里只放一枚线条图标，
   默认 --ink-3（和 placeholder 同档），切换成明文后提到 --ink-2 作为状态提示 */
.auth-pwd{display:flex;align-items:center;gap:12px}
.auth-pwd .auth-input{flex:1;min-width:0}
.auth-eye{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-right:-3px;          /* 图标视觉右缘对齐卡片边 */
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink-3);
  transition:color .2s, opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.auth-eye:active{opacity:.55}
.auth-eye svg{
  width:18px;height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* 图标语义：密码隐藏时显示「带斜线的眼睛」（表示当前被遮住），
   切到明文后才显示「睁眼」。原来反了 —— 明文状态下还挂着斜线。 */
.auth-eye .eye-open{display:none}
.auth-eye[aria-pressed="true"]{color:var(--ink-2)}
.auth-eye[aria-pressed="true"] .eye-open{display:block}
.auth-eye[aria-pressed="true"] .eye-off{display:none}
/* 键盘聚焦时才给一圈淡淡的焦点环，触摸时不出现
   （不用 color-mix：老版本 Android WebView 不支持） */
.auth-eye:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:2px;
  border-radius:50%;
  color:var(--accent);
}

/* 验证码行：按钮做成与「忘记密码」同语言的纯文字操作，不带框 ——
   卡片本身无框，行内再套一个描边按钮会像外来组件；
   倒计时禁用时只降字色，不保留任何框感 */
.auth-code-row{display:flex;align-items:center;gap:12px}
.auth-code-row .auth-input{
  flex:1;min-width:0;
  font-variant-numeric:tabular-nums;   /* 6 位数字等宽排布，不会挤成一团 */
  letter-spacing:.28em;                /* 数字之间留缝，对得上「6 位」的形态 */
}
.auth-code-row .auth-input::placeholder{letter-spacing:.02em}
.auth-code-btn{
  flex:0 0 auto;
  background:none;
  border:none;
  padding:6px 0 6px 12px;   /* 左侧留白即与输入的分隔；上下扩出点击区 */
  cursor:pointer;
  font-family:var(--font-sans);   /* 工具层（table.csv）：验证码按钮切黑体 */
  font-size:calc(clamp(11.5px,2.9cqw,13.5px) * var(--fs));
  letter-spacing:.08em;
  color:var(--accent);
  white-space:nowrap;
  transition:opacity .2s, color .2s;
}
.auth-code-btn:active{opacity:.6}
.auth-code-btn:disabled{
  color:var(--ink-3);
  cursor:default;
}

/* ---------- 行内文字按钮（忘记密码；登录页与账号流程页共用） ----------
   跟着正文同色（不再用主题红）：它是次级操作，不该和错误/强调抢注意力 */
.auth-link{
  flex:0 0 auto;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--font-sans);   /* 工具层（table.csv）：文字按钮 */
  font-size:calc(clamp(11.5px,2.9cqw,13.5px) * var(--fs));
  letter-spacing:.08em;
  color:var(--ink);
  padding:0;
  white-space:nowrap;
}
.auth-link:active{opacity:.6}

/* ---------- 主按钮：大圆角（与品牌按钮同款胶囊），50px 高 → 25px 圆角 ---------- */
.auth-submit{
  display:block;
  width:100%;
  height:50px;
  margin-top:28px;
  background:#1c1c1e;
  color:#ffffff;
  border:none;
  border-radius:25px;
  cursor:pointer;
  font-family:var(--font-sans);   /* 字体分层（table.csv）：主按钮属工具层，切黑体 */
  font-size:calc(clamp(13px,3.3cqw,15px) * var(--fs));
  letter-spacing:.18em;
  transition:opacity .2s, background .35s, color .35s;
}
.auth-submit:active{opacity:.85}
.auth-submit:disabled{opacity:.6;cursor:default}
.device.night .auth-submit{background:#f0f0f4;color:#1c1c1e}

/* ============================================================
   登录页本体（登录.html 布局）：四视图容器
   chooser 选登录方式 → login 邮箱登录 / register 注册，
   视图切换走高度过渡动画；协议勾选在容器外三个视图共用。
   文案（占位符 / 标题）沿用同帧自己的，只换布局与交互。
   ============================================================ */
.auth-views{
  /* 登录页所有内容收成同一列宽并水平居中：
     品牌按钮、分隔线、幽灵按钮、各视图表单、底部切换行都用这一档宽度，
     不跟着 .page 的 560px 上限铺满整宽 */
  --auth-col:min(100%, 280px);
  /* 滚动区是 flex 列容器，上下 auto 外边距把整块内容顶到垂直居中 */
  margin:auto 0;
  width:100%;
  overflow:hidden;
  transition:height .36s cubic-bezier(.2,.8,.25,1);
}
.auth-view{display:none;padding:0 7cqw}
/* 邮箱登录 / 注册：留白与全站统一（5cqw），表单列放到整条可写宽度 ——
   卡片左右边缘落在和「我的」等页面同一条竖线上，内文起始位置也就一致了。
   chooser（微信 / QQ 那颗按钮列）保持 7cqw + 280px 窄列不变。 */
#auth-view-login,
#auth-view-register{
  padding:0 5cqw;
  --auth-col:min(100%, 400px);
}
.auth-view.active{
  display:block;
  animation:authViewIn .4s cubic-bezier(.22,.85,.3,1) both;
}
@keyframes authViewIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* 视图内不放返回键：login / register 共用页面顶部那颗 trash-back（#auth-back），
   在子视图里点它先回 chooser，再点才退出登录页（auth.js 返回段）。
   子视图也不再重复大标题 —— 标题只在 chooser 出现一次，进视图直接是表单。 */

/* ---------- 品牌大按钮（微信 / QQ）：主登录 ----------
   比表单列更短一档（300px 上限）、46px 高，居中；白色图标在左，
   拉起客户端期间换小转圈；点击轻微下压。 */
.auth-oauth{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  width:var(--auth-col);
  margin:0 auto;
}
.oauth-btn{
  position:relative;
  width:100%;height:46px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:23px;      /* 大圆角：46px 高全圆 */
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-family:var(--font-sans);
  font-size:calc(clamp(13.5px,3.5cqw,15px) * var(--fs));
  font-weight:600;letter-spacing:.14em;
  color:#fff;
  transition:transform .22s cubic-bezier(.2,.8,.25,1), filter .22s ease;
  animation:authFadeIn .5s ease both;
}
@keyframes authFadeIn{from{opacity:0}to{opacity:1}}
.auth-oauth .oauth-btn:nth-child(1){animation-delay:.1s}
.auth-oauth .oauth-btn:nth-child(2){animation-delay:.18s}
.oauth-btn[data-provider="wx"]{background:#2aae67}
.oauth-btn[data-provider="qq"]{background:#0099ff}
.oauth-btn:active{transform:scale(.992)}
/* 图标跟着文字走（不再绝对定位贴左缘），两者之间只留 10px */
.oauth-ico{
  flex:none;
  width:24px;height:24px;
  display:grid;place-items:center;
}
.oauth-ico svg{width:22px;height:22px;color:#fff}
.oauth-spin{
  flex:none;
  display:none;
  width:18px;height:18px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:authSpin .8s linear infinite;
}
@keyframes authSpin{to{transform:rotate(360deg)}}
.oauth-btn.loading{pointer-events:none;opacity:.92}
.oauth-btn.loading .oauth-ico{display:none}
.oauth-btn.loading .oauth-spin{display:block}
.oauth-btn.busy{pointer-events:none}

/* ---------- 分隔线「或使用账号密码」 ---------- */
.auth-divider{
  display:flex;align-items:center;gap:12px;
  width:var(--auth-col);
  margin:26px auto 18px;
  font-family:var(--font-sans);
  font-size:calc(clamp(11px,2.8cqw,12.5px) * var(--fs));
  letter-spacing:.12em;
  color:var(--ink-3);
}
.auth-divider::before,
.auth-divider::after{
  content:"";flex:1;height:0.5px;background:var(--card-border);
}

/* ---------- 邮箱登录：白底、无边框、大圆角（与品牌按钮同宽同高，图标同尺寸） ---------- */
.auth-others{display:flex;justify-content:center;width:var(--auth-col);margin:0 auto}
.auth-ghost{
  flex:0 1 auto;width:100%;height:46px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border:0;
  border-radius:23px;
  background:#ffffff;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:calc(clamp(12.5px,3.2cqw,14px) * var(--fs));
  letter-spacing:.08em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .35s, color .2s, transform .2s;
}
.device.night .auth-ghost{background:#2c2c2c;box-shadow:none}
.auth-ghost svg{
  width:22px;height:22px;flex:none;   /* 与微信 / QQ 图标同尺寸 */
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.75;
}
.auth-ghost:active{transform:scale(.985)}

/* ---------- 表单字段：无边框淡灰底输入框（字段名已去掉，靠占位符说明） ---------- */
.auth-fieldbox{margin-bottom:13px}
.auth-fieldbox > label,
.auth-frow label{
  display:block;
  margin-bottom:7px;
  font-family:var(--font-sans);
  font-size:calc(clamp(11.5px,2.9cqw,13px) * var(--fs));
  font-weight:500;letter-spacing:.06em;
  color:var(--ink-2);
}
.auth-frow{
  display:flex;align-items:center;justify-content:flex-end;   /* 只剩「忘记密码」，靠右 */
  margin-bottom:7px;
}
.auth-iwrap{position:relative}
.auth-iwrap.with-eye .auth-finput{padding-right:46px}
/* 输入框：与「忘记密码」页的表单卡同一语言 —— 白底、16px 圆角、同一枚柔和投影、
   同一档 60px 高（那边是 16px 内边距 + 28px 输入行 = 60px）。
   聚焦不换底色不描边：投影本身就是分界 */
.auth-finput{
  display:block;width:100%;height:60px;padding:0 16px;
  background:var(--card-bg);
  border:0;
  border-radius:16px;
  box-shadow:0 2px 10px -3px rgba(28,28,30,.18), 0 1px 3px rgba(28,28,30,.06);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:calc(clamp(14px,3.6cqw,16px) * var(--fs));
  letter-spacing:.04em;
  outline:none;
  transition:box-shadow .18s ease;
}
.auth-finput::placeholder{color:var(--ink-3);letter-spacing:.02em}
.auth-finput:focus{
  box-shadow:0 3px 14px -3px rgba(28,28,30,.24), 0 1px 3px rgba(28,28,30,.08);
}
.device.night .auth-finput{background:#232326;box-shadow:none}
.device.night .auth-finput:focus{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
.auth-finput:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--card-bg) inset;
}
.device.night .auth-finput:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #232326 inset;
}
/* 眼睛按钮在描边输入框里改绝对定位（账号流程页仍是卡片行内布局，不冲突） */
.auth-iwrap .auth-eye{
  position:absolute;right:5px;top:50%;
  transform:translateY(-50%);
  width:36px;height:36px;margin:0;
}

/* 验证码 6 格；与 auth-finput 同一语言（白底 + 柔和投影 + 60px 高），
   「获取验证码 / 倒计时」另起一行居中，纯文字无底无边 */
.auth-code6-row{display:flex;flex-direction:column;gap:12px}
.auth-code6{display:flex;gap:6px;flex:1;min-width:0}
.auth-code-in{
  flex:1 1 0;min-width:0;height:60px;padding:0;
  text-align:center;
  background:var(--card-bg);
  border:0;
  border-radius:12px;
  box-shadow:0 2px 10px -3px rgba(28,28,30,.18), 0 1px 3px rgba(28,28,30,.06);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:calc(clamp(15px,3.9cqw,17px) * var(--fs));
  font-weight:600;
  font-variant-numeric:tabular-nums;
  outline:none;
  transition:box-shadow .18s ease;
}
.auth-code-in.filled,
.auth-code-in:focus{
  box-shadow:0 3px 14px -3px rgba(28,28,30,.24), 0 1px 3px rgba(28,28,30,.08);
}
.device.night .auth-code-in{background:#232326;box-shadow:none}
.device.night .auth-code-in.filled,
.device.night .auth-code-in:focus{box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14)}
/* 获取验证码 / 倒计时：单独一行、居中、纯文字（无底色无边框） */
.auth-code-btn2{
  align-self:center;
  padding:4px 2px;
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--accent);
  font-family:var(--font-sans);
  font-size:calc(clamp(11.5px,2.9cqw,13px) * var(--fs));
  font-weight:600;letter-spacing:.08em;
  white-space:nowrap;
  cursor:pointer;
  transition:opacity .2s;
}
.auth-code-btn2:active{opacity:.6}
.auth-code-btn2:disabled{color:var(--ink-3);cursor:default;opacity:1}

/* 校验失败统一走底部 toast，字段下方不再留行内红字槽位 */

/* 各视图的表单本体：与 chooser 同一列宽、整体居中 */
.auth-view .auth-form{
  width:var(--auth-col);
  margin:0 auto;
}

/* 视图底部切换行（还没有账号？立即注册 / 已有账号？去登录） */
.auth-swap{
  width:var(--auth-col);
  margin:18px auto 0;text-align:center;
  font-family:var(--font-sans);
  font-size:calc(clamp(12px,3cqw,13.5px) * var(--fs));
  letter-spacing:.04em;
  color:var(--ink-3);
}
.auth-swap button{
  border:0;background:none;padding:2px 4px;border-radius:6px;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:inherit;font-weight:600;letter-spacing:.04em;
  cursor:pointer;
}

/* ---------- 注册三步（邮箱 → 验证码 → 昵称+密码） ---------- */
/* 第 2 步的行内提示：验证码发到哪个邮箱 */
.reg-sent{
  margin:0 2px 12px;
  font-family:var(--font-sans);
  font-size:calc(clamp(10.5px,2.6cqw,12px) * var(--fs));
  letter-spacing:.04em;line-height:1.6;
  color:var(--ink-3);
}
.reg-sent:empty{display:none}
/* 上一步：文字按钮，居中小字 */
.reg-back{
  display:block;
  margin:14px auto 0;
  text-align:center;
  color:var(--ink-3);
  font-size:calc(clamp(11.5px,2.9cqw,13px) * var(--fs));
}
.reg-back:active{color:var(--ink)}
/* 步骤切换时轻轻淡入（高度过渡由 JS 同步锁） */
#reg-step-2:not([hidden]),
#reg-step-3:not([hidden]){animation:authViewIn .32s cubic-bezier(.22,1,.36,1) both}

/* ---------- 协议（固定在页面底部，滚动区外，三个视图共用一份） ---------- */
.auth-agree{
  flex:0 0 auto;
  display:flex;align-items:flex-start;justify-content:center;gap:8px;
  margin:0;
  padding:12px 7cqw calc(var(--sf-sab, env(safe-area-inset-bottom, 0px)) + 14px);
  background:var(--page-bg);
  font-family:var(--font-sans);
  font-size:calc(clamp(10.5px,2.6cqw,12px) * var(--fs));
  line-height:1.65;letter-spacing:.04em;
  color:var(--ink-2);
  cursor:pointer;user-select:none;
  transition:color .2s, background .35s;
}
/* 复选框 + 文字整体居中；文字自身仍左对齐（换行时两行起始边对齐） */
.auth-agree .txt{text-align:left;min-width:0}
.auth-agree input{
  appearance:none;-webkit-appearance:none;
  flex:none;width:16px;height:16px;margin:1px 0 0;
  border:1.5px solid var(--ink-3);border-radius:5px;
  background:transparent;cursor:pointer;position:relative;
  transition:background .2s, border-color .2s;
}
.auth-agree input:checked{background:var(--ink);border-color:var(--ink)}
.auth-agree input:checked::after{
  content:"";position:absolute;left:4.5px;top:1px;
  width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.device.night .auth-agree input:checked{background:#f0f0f4;border-color:#f0f0f4}
.device.night .auth-agree input:checked::after{border-color:#1c1c1e}
/* 协议链接：正文同色（不再用主题红），靠「用户协议 / 隐私政策」的分词本身可点 */
.auth-agree a{color:var(--ink);text-decoration:none}
.auth-agree a:active{opacity:.6}
/* 未勾选不改任何颜色（文字、复选框都保持原样），只抖这一行 + toast 提示 */

/* ---------- 协议未勾选抖动（只抖复选框 + 文字这一行，不晃整个视图） ---------- */
@keyframes authShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}
.auth-shake{animation:authShake .34s cubic-bezier(.36,.07,.19,.97) both}

/* ============================================================
   账号安全页（#page-security）
   从「我的 → 账户管理」进入（登录后），含修改密码 / 注销账户。
   头部复用回收站页的 trash-head / trash-back；列表行与我的页 p-row 同语系。
   ============================================================ */

#page-security{z-index:55}

.security-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:2.2cqh 5cqw calc(30px + 0px);
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.security-body::-webkit-scrollbar{width:0;height:0;display:none}

.security-list{
  display:flex;flex-direction:column;
  border:none;                 /* 不描边：白色圆角卡落在浅底上，边界靠明度差 */
  border-radius:16px;
  overflow:hidden;             /* 首行/末行与分割线裁进弧内 */
  background:var(--card-bg);
  transition:background .35s,border-color .35s;
}

/* 单行：图标 + 主文案（标题 + 副标题）+ 右箭头 */
.sec-row{
  display:flex;align-items:center;gap:3.4cqw;
  width:100%;min-height:64px;
  padding:2.6cqw 4cqw;
  background:none;
  border:none;border-bottom:var(--hairline);
  font-family:var(--font-sans);text-align:left;   /* 工具层（table.csv）：设置行 */
  cursor:pointer;appearance:none;
  transition:background .2s;
}
.sec-row:last-child{border-bottom:none}
.sec-row:active{background:var(--panel-bg);transition-duration:.12s}

.sec-ico{
  flex:0 0 auto;
  width:38px;height:38px;
  display:grid;place-items:center;
  border:none;                 /* 图标底块去描边，只留浅灰面 */
  border-radius:11px;
  background:var(--panel-bg);
  transition:background .35s,border-color .35s;
}
.sec-ico svg{
  width:19px;height:19px;
  fill:none;stroke:var(--icon-2);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s;
}

.sec-main{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:1cqw;
}
.sec-main b{
  font-weight:500;
  font-size:calc(clamp(13.5px,3.4cqw,15px) * var(--fs));
  letter-spacing:.1em;color:var(--ink);
  transition:color .35s;
}
.sec-main small{
  font-size:calc(clamp(10px,2.5cqw,11px) * var(--fs));
  letter-spacing:.06em;color:var(--ink-3);
  transition:color .35s;
}

/* 行尾状态值（当前无使用者，保留骨架以备列表行扩展） */
.sec-val{
  flex:0 1 auto;min-width:0;
  max-width:46%;
  margin-left:auto;
  font-size:calc(clamp(11px,2.9cqw,13px) * var(--fs));
  letter-spacing:.06em;color:var(--ink-3);
  text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .35s;
}
.sec-row .sec-val + .sec-arrow{margin-left:2cqw}

.sec-arrow{
  flex:0 0 auto;width:13px;height:13px;
  stroke:var(--icon-3);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s;
}

.security-note{
  margin-top:3.2cqh;text-align:center;
  font-size:calc(clamp(10px,2.5cqw,11px) * var(--fs));
  color:var(--ink-3);letter-spacing:.1em;line-height:2;
  transition:color .35s;
}

/* ============================================================
   数据管理页（#page-data）
   卡片行沿用 security-body / security-list / sec-row，
   这里只补本页独有的说明文字与分组标题。
   ============================================================ */

#page-data{z-index:55}

/* 本机数据占用卡：独立一张卡，与下方列表隔开一段呼吸 */
.usage-card{margin-bottom:3cqh}

/* 右上角数据说明入口：与返回键同高的小圆钮 */
.head-info{
  margin-left:auto;
  width:34px;height:38px;
  display:grid;place-items:center;
  padding:0;background:none;border:none;cursor:pointer;
  color:var(--icon-2);
  -webkit-tap-highlight-color:transparent;
  transition:color .35s;
}
.head-info svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.head-info:active{color:var(--accent)}

/* 本机数据占用行：文字 + 细进度条 */
.usage-bar{
  display:block;
  height:3px;border-radius:99px;
  margin-top:1.6cqw;
  background:rgba(28,28,30,.10);
  overflow:hidden;
  transition:background .35s;
}
.usage-fill{
  display:block;height:100%;width:0;
  border-radius:99px;
  background:var(--accent);
  transition:width .5s cubic-bezier(.25,.72,.35,1), background .35s;
}

.data-lead{
  margin:0 .4cqw 3.2cqh;
  font-size:calc(clamp(11px,2.9cqw,13px) * var(--fs));
  line-height:2;letter-spacing:.06em;color:var(--ink-3);
  transition:color .35s;
}
.data-lead em{font-style:normal;color:var(--ink-2)}

/* 自动备份这一行不是按钮，只留开关可点 */
.data-row{cursor:default}
.data-row .switch{margin-left:auto}

.data-h{
  margin:4.4cqh .4cqw 1.8cqh;
  font-weight:500;
  font-size:calc(clamp(10px,2.5cqw,11px) * var(--fs));
  letter-spacing:.26em;color:var(--ink-3);
  transition:color .35s;
}
.data-note{
  margin:2.4cqh .4cqw 0;
  font-size:calc(clamp(10px,2.5cqw,11px) * var(--fs));
  line-height:1.95;letter-spacing:.06em;color:var(--ink-3);
  transition:color .35s;
}

/* 备份/恢复进行中：整行禁用，避免重复点 */
.sec-row[disabled]{opacity:.5;pointer-events:none}

/* ============================================================
   账号流程页：修改密码（#page-pwd-change）/ 忘记密码（#page-pwd-forgot）
   / 注销账户（#page-del-account）
   输入卡与按钮直接复用登录页的 auth-card / auth-field / auth-input /
   auth-code-row / auth-submit；这里只补头部、步骤条、注销注意事项。
   ============================================================ */

.acct-body{
  flex:1;min-height:0;overflow-y:auto;
  padding:2.2cqh 5cqw calc(30px + 0px);
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.acct-body::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- 头部（无登录页那套换字动画，静态即可） ---------- */
.acct-head{margin-bottom:3cqh}
.acct-eyebrow{
  font-size:calc(clamp(11px,2.7cqw,13px) * var(--fs));
  letter-spacing:.36em;
  margin-bottom:1.6cqh;
  color:var(--ink-3);
  transition:color .35s;
}
.acct-h1{
  font-size:calc(clamp(24px,7cqw,34px) * var(--fs));
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.25;
  color:var(--ink);
  transition:color .35s;
}
.acct-sub{
  margin-top:1.4cqh;
  font-size:calc(clamp(11px,2.9cqw,13px) * var(--fs));
  letter-spacing:.14em;
  color:var(--ink-2);
  transition:color .35s;
}

/* ---------- 步骤条：细线 + 步数文案，随步骤推进 ---------- */
.acct-steps{
  display:flex;align-items:center;gap:12px;
  margin-bottom:3.4cqh;
  transition:visibility 0s;
}
.acct-step-bar{
  position:relative;flex:1;height:2px;
  background:var(--card-border);
  border-radius:1px;overflow:hidden;
  transition:background .35s;
}
.acct-step-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--ink);border-radius:1px;
  transition:width .4s cubic-bezier(.22,1,.36,1);
}
.acct-step-text{
  flex:0 0 auto;
  font-size:calc(clamp(10px,2.5cqw,11px) * var(--fs));
  letter-spacing:.16em;
  color:var(--ink-3);
  transition:color .35s;
}

.acct-pane[hidden]{display:none}

.acct-tip{
  margin-top:12px;
  font-size:calc(clamp(10.5px,2.6cqw,12px) * var(--fs));
  letter-spacing:.08em;
  line-height:1.7;
  color:var(--ink-3);
  transition:color .35s;
}

/* 只读的注册邮箱行 */
.acct-field-label{
  display:block;
  margin-bottom:6px;
  font-size:calc(clamp(10px,2.5cqw,11px) * var(--fs));
  letter-spacing:.16em;
  color:var(--ink-3);
  transition:color .35s;
}
.acct-static{
  display:block;
  font-family:var(--font-sans);   /* 工具层（table.csv）：账号信息行 */
  font-size:calc(clamp(14px,3.6cqw,16px) * var(--fs));
  letter-spacing:.04em;
  color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .35s;
}

/* ---------- 成功态：居中对勾 ---------- */
.acct-done{
  display:flex;flex-direction:column;align-items:center;
  padding-top:7cqh;text-align:center;
}
.acct-done-ico{
  width:64px;height:64px;
  display:grid;place-items:center;
  border:1.5px solid var(--ink);border-radius:50%;
  margin-bottom:3cqh;
  transition:border-color .35s;
}
.acct-done-ico svg{
  width:26px;height:26px;
  fill:none;stroke:var(--ink);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s;
}
.acct-done-h{
  font-size:calc(clamp(19px,5.4cqw,24px) * var(--fs));
  font-weight:400;letter-spacing:.16em;color:var(--ink);
  transition:color .35s;
}
.acct-done-p{
  margin-top:1.4cqh;
  font-size:calc(clamp(11px,2.9cqw,13px) * var(--fs));
  letter-spacing:.12em;color:var(--ink-2);
  transition:color .35s;
}
.acct-done .auth-submit{margin-top:6cqh}

/* ============================================================
   注销账户（#page-del-account）
   注意事项 + 确认输入合并在同一张卡里：事项之间用发丝线分组，
   确认区收在卡尾；底部红色注销按钮默认禁用，
   输入框原样输入「我已阅读并同意注销」后才亮起。
   ============================================================ */

.da-card{
  background:var(--panel-bg);
  border-radius:16px;
  transition:background .35s;
}
.da-item{
  display:flex;gap:3.4cqw;
  padding:13px 16px;
}
.da-num{
  flex:0 0 auto;
  width:22px;height:22px;margin-top:2px;
  display:grid;place-items:center;
  border:1px solid var(--card-border);border-radius:50%;
  font-size:calc(clamp(10px,2.5cqw,11px) * var(--fs));
  color:var(--ink-2);
  transition:color .35s,border-color .35s;
}
.da-txt b{
  display:block;
  font-weight:500;
  font-size:calc(clamp(13px,3.3cqw,14.5px) * var(--fs));
  letter-spacing:.08em;
  color:var(--ink);
  transition:color .35s;
}
.da-txt p{
  margin-top:5px;
  font-size:calc(clamp(11px,2.8cqw,12.5px) * var(--fs));
  letter-spacing:.04em;
  line-height:1.75;
  color:var(--ink-2);
  transition:color .35s;
}

.da-confirm{
  margin-top:16px;
}
.da-input-label{
  display:block;margin-bottom:8px;
  font-size:calc(clamp(10px,2.5cqw,11px) * var(--fs));
  letter-spacing:.16em;
  color:var(--ink);
  transition:color .35s;
}
.da-input{
  height:auto;min-height:44px;
  padding:10px 12px;
  background:var(--panel-bg);
  border-radius:10px;
}

/* 底部操作栏：与回收站的 trash-bar 同层语义（页面 flex 列的收尾行） */
.da-bar{
  flex:0 0 auto;
  display:flex;
  padding:12px 5cqw calc(16px + 0px);
}
.da-ok{
  width:100%;height:50px;
  background:var(--danger-fill);color:#ffffff;
  border:none;border-radius:12px;cursor:pointer;
  font-family:var(--font-sans);   /* 工具层（table.csv）：弹窗按钮 */
  font-size:calc(clamp(13px,3.3cqw,15px) * var(--fs));
  letter-spacing:.18em;
  transition:opacity .2s, background .35s;
}
.da-ok:active{opacity:.85}
.da-ok:disabled{opacity:.4;cursor:default}