/* ==================================================================
   账号区样式 · 只补 app.css / tokens.css 没覆盖的部分
   1. 颜色一律 var(--*) 令牌，不写字面量
   2. 字号一律 var(--t-*)，圆角一律 var(--r-s/m/l) 或 999px
   3. 字重只用 400 / 500，页面主标题才 600
   4. 不改 app.css 已有版式，只新增本区需要的容器与状态
   ================================================================== */

/* ---------- 状态条：加载 / 空 / 错误 / 成功 ---------- */
.hub-state {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--wash);
  color: var(--t2);
  font-size: var(--t-sm);
  line-height: 1.65;
}
.hub-state > b {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--t2);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 15px;
  text-align: center;
}
.hub-state.is-loading { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
.hub-state.is-loading > b { border-color: var(--blue-line); color: var(--blue); }
.hub-state.is-error { background: var(--red-soft); border-color: var(--red-soft); color: var(--red); }
.hub-state.is-error > b { border-color: var(--red-soft); color: var(--red); }
.hub-state.is-ok { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok); }
.hub-state.is-ok > b { border-color: var(--ok-soft); color: var(--ok); }

/* ---------- 表单提示条 ---------- */
.acct-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  background: var(--wash);
  color: var(--t2);
  font-size: var(--t-sm);
  line-height: 1.65;
}
.acct-msg[hidden] { display: none; }
.acct-msg.is-err { background: var(--red-soft); color: var(--red); }
.acct-msg.is-ok { background: var(--ok-soft); color: var(--ok); }
.acct-msg.is-warn { background: var(--warn-soft); color: var(--warn); }
.acct-msg b { font-weight: 500; }

/* ---------- 未登录闸门 ---------- */
.acct-gate { max-width: 46ch; }
.acct-gate h3 { font-size: var(--t-h3); font-weight: 500; color: var(--ink); }
.acct-gate p { margin-top: 6px; font-size: var(--t-sm); line-height: 1.7; color: var(--t2); }
.acct-gate .u-row { margin-top: 14px; }

/* ---------- 行内表单（绑定玩家 / 新建任务） ---------- */
.acct-form-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.acct-form-row .field { flex: 1 1 150px; min-width: 0; }
.acct-form-row .field.is-narrow { flex: 0 0 130px; }
.acct-form-row .btn { flex: 0 0 auto; }

/* ---------- 列表行 ---------- */
.acct-list { display: flex; flex-direction: column; }
.acct-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.acct-row:last-child { border-bottom: none; }
.acct-row .acct-main { flex: 1; min-width: 0; }
.acct-row .acct-t {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-row .acct-d { margin-top: 2px; font-size: var(--t-xs); color: var(--t2); }
.acct-row .acct-acts { display: flex; gap: 12px; flex-shrink: 0; }
.acct-row .acct-acts button {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--t-xs);
  font-family: inherit;
  color: var(--t2);
  cursor: pointer;
}
.acct-row .acct-acts button:hover { color: var(--ink); }
.acct-row .acct-acts button.is-red { color: var(--red); }
.acct-row input[type="checkbox"] { accent-color: var(--blue); flex: 0 0 auto; }

/* ---------- 监测对象：长列表滚动区 ---------- */
.acct-scroll { max-height: 340px; overflow-y: auto; padding-right: 4px; }

/* ---------- 禁用态：服务端尚无对应能力时如实标注 ---------- */
.is-off { opacity: .5; }
.switch.is-off { pointer-events: none; }

/* ---------- 数据对（键值行）补充 ---------- */
.acct-kv { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acct-kv .k { font-size: var(--t-sm); color: var(--t2); }
.acct-kv .v { font-size: var(--t-sm); color: var(--ink); font-weight: 500; }

/* ---------- 邮件预览空态 ---------- */
.acct-mail-empty { padding: 14px 0; }

/* ---------- 窄屏 ---------- */
@media (max-width: 780px) {
  .acct-form-row .field.is-narrow { flex: 1 1 100%; }
  .acct-scroll { max-height: 280px; }
}

/* ---------- 新建监控任务：主页面与抽屉共享 ---------- */
.monitor-create-card {
  width: min(100%, 960px);
  margin-inline: auto;
}
.monitor-create-hd { align-items: flex-start; }
.monitor-create-hd > div { min-width: 0; }
.monitor-create-hd p,
.monitor-drawer .drawer-hd p {
  margin-top: 4px;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--t2);
}
.monitor-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.monitor-form-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.monitor-form-grid .field { min-width: 0; }
.monitor-form-grid .field > label { line-height: 1.55; }
.req { color: var(--red); }
.monitor-check-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--wash);
  cursor: pointer;
}
.monitor-check-row input {
  flex: 0 0 auto;
  margin-top: 5px;
  accent-color: var(--blue);
}
.monitor-check-row span { min-width: 0; }
.monitor-check-row b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.monitor-check-row small {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--t2);
}
.monitor-form-msg {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 0;
}
.monitor-form-msg:empty { display: none; }
.monitor-form-ft {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: var(--gap);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.monitor-create-form.drawer-bd { display: block; }
.monitor-create-form .drawer-ft {
  margin-inline: 0;
  padding-inline: 0;
  padding-bottom: 0;
}
@media (max-width: 680px) {
  .monitor-form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .monitor-form-ft { width: 100%; }
  .monitor-form-ft .btn { flex: 1 1 0; min-width: 0; }
  .monitor-create-hd { align-items: flex-start; }
  .monitor-create-hd .tag { max-width: 42%; white-space: normal; text-align: right; }
}

/* ---------- 邮件日报订阅管理 ---------- */
.report-list-hd { align-items: flex-start; }
.report-list-hd > div,
.report-editor .panel-h > div { min-width: 0; }
.report-list-hd p,
.report-editor .panel-h p,
.report-page > .panel:last-child .panel-h p {
  margin-top: 4px;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--t2);
}
.report-page-msg { margin-top: 14px; }
.report-page-msg:empty { display: none; }
.report-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 188px;
  padding: 22px;
  border: 1px dashed var(--blue-line);
  border-radius: var(--r-m);
  background: var(--wash);
}
.report-empty h3 { font-size: var(--t-h3); font-weight: 500; color: var(--ink); }
.report-empty p { max-width: 56ch; margin-top: 6px; font-size: var(--t-sm); line-height: 1.7; color: var(--t2); }
.report-empty .btn { margin-top: 16px; }
.report-subscription {
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--wash);
}
.report-subscription-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.report-subscription-title { min-width: 0; }
.report-subscription-title h3 {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-subscription-title p { margin-top: 3px; font-size: var(--t-xs); color: var(--t2); }
.report-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.report-meta-item {
  min-width: 0;
  padding: 12px 13px;
  border-radius: var(--r-m);
  background: var(--card);
}
.report-meta-item .k { display: block; font-size: var(--t-xs); color: var(--t2); }
.report-meta-item .v {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.report-actions .is-red { color: var(--red); }
.report-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.report-form-grid .field { min-width: 0; }
.report-field-recipient { grid-column: 1 / -1; }
.report-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.report-options legend { margin-bottom: 8px; color: var(--ink); font-size: var(--t-sm); font-weight: 500; }
.report-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.report-option-row:last-child { border-bottom: none; }
.report-option-row > div { min-width: 0; }
.report-option-row b { display: block; color: var(--ink); font-size: var(--t-sm); font-weight: 500; line-height: 1.5; }
.report-option-row span { display: block; margin-top: 2px; color: var(--t2); font-size: var(--t-xs); line-height: 1.55; }
.report-option-row .switch { flex: 0 0 40px; }
.report-form-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: var(--gap);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.report-preview { min-height: 188px; }
.report-preview-empty { display: grid; min-height: 150px; place-items: center; text-align: center; }
.report-preview-empty p { color: var(--t2); font-size: var(--t-sm); }
.report-preview .mail-hd { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); color: var(--t2); font-size: var(--t-xs); }
.report-preview > h3 { margin-top: 16px; color: var(--ink); font-size: var(--t-h3); font-weight: 500; }
@media (max-width: 900px) {
  .report-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .report-form-grid,
  .report-meta-grid { grid-template-columns: minmax(0, 1fr); }
  .report-field-recipient { grid-column: auto; }
  .report-actions { justify-content: stretch; }
  .report-actions .btn { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .report-form-ft .btn { flex: 1 1 0; }
  .report-subscription-title h3 { white-space: normal; overflow-wrap: anywhere; }
  .report-option-row { align-items: flex-start; }
}

/* ==================================================================
   个人资料 profile.html（6.3）
   1. 身份行：头像框 / 头像 / 昵称 / 角色·VIP 标签 严格同一行
   2. 基本信息键值表：两列自适应，窄屏整行堆叠
   ================================================================== */

/* 面板标题：与全站 h3 同规格，避免 h2 默认字号破坏节奏 */
.panel-h h2 { font-size: var(--t-h3); font-weight: 500; color: var(--ink); }

/* ==================================================================
   R3-029 · 控制台重构（dashboard.html）
   ------------------------------------------------------------------
   信息层级：欢迎行 → 关键指标卡 → 最近活动 / 快捷入口 → 系统简报
   → 明细面板（收藏玩家 / 监控任务 / 战绩快照 / 邮件日报）
   卡片统一圆角与留白，窄屏单列不横向溢出。
   ================================================================== */
.dash-hello { align-items: flex-end; }
.dash-hello .src-note { margin-top: 6px; }

.kpi .kpi-note {
  margin-top: 6px;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--t2);
}

/* 最近活动 + 快捷入口：桌面 1.4fr / 1fr，≤900px 单列。
   同一行内两卡等高（stretch），矮的一方内容垂直居中，不写死像素 */
.dash-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.dash-cols > .panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dash-cols > .panel > .dash-act,
.dash-cols > .panel > .dash-quick {
  flex: 1 1 auto;
  justify-content: center;
}
@media (max-width: 900px) {
  .dash-cols { grid-template-columns: minmax(0, 1fr); }
  /* 手机端两块各自单独成卡，不强行拉平高度 */
  .dash-cols { align-items: start; }
  .dash-cols > .panel > .dash-act,
  .dash-cols > .panel > .dash-quick { flex: 0 1 auto; justify-content: flex-start; }
}

/* 最近活动列表 */
.dash-act { display: flex; flex-direction: column; gap: 0; }
.act-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.act-row:last-child { border-bottom: none; }
.act-row .act-t {
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.act-row .act-d { font-size: var(--t-xs); color: var(--t2); white-space: nowrap; }
@media (max-width: 560px) {
  .act-row { grid-template-columns: minmax(0, 1fr) auto; }
  .act-row .act-t { grid-column: 1 / -1; white-space: normal; }
}

/* 快捷入口 */
.dash-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-s);
}
.dash-quick-i {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--wash);
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.dash-quick-i:hover { background: var(--card); box-shadow: inset 0 0 0 1px var(--blue-line); }
.dash-quick-t { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.dash-quick-d {
  display: block;
  margin-top: 2px;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--t2);
}
@media (max-width: 420px) {
  .dash-quick { grid-template-columns: minmax(0, 1fr); }
}

/* R4-030：明细面板左右共享一行（左：收藏玩家 / 右：监控任务；
   左：战绩快照 / 右：邮件日报），≤900px 纵向堆叠 */
.dash-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}
.dash-panels > .panel { min-width: 0; }
.console-card-grid > .console-status-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-l);
}
.console-status-card > .panel-h { flex: 0 0 auto; }
.console-status-card > .stack { min-height: 0; }
.console-status-card .panel-h h2 {
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.45;
}
.snapshot-scroll {
  flex: 1 1 0;
  block-size: 0;
  min-height: 0;
  padding-right: 4px;
  overflow-y: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}
.snapshot-scroll::-webkit-scrollbar { width: 0; }
@media (hover: hover) {
  .snapshot-scroll:hover,
  .snapshot-scroll:focus-visible,
  .snapshot-scroll:focus-within {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--blue-line) transparent;
  }
  .snapshot-scroll:hover::-webkit-scrollbar,
  .snapshot-scroll:focus-visible::-webkit-scrollbar,
  .snapshot-scroll:focus-within::-webkit-scrollbar { width: 4px; }
  .snapshot-scroll:hover::-webkit-scrollbar-thumb,
  .snapshot-scroll:focus-visible::-webkit-scrollbar-thumb,
  .snapshot-scroll:focus-within::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--blue-line);
  }
}
@media (hover: none), (pointer: coarse) {
  .snapshot-scroll {
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 900px) {
  .dash-panels { grid-template-columns: minmax(0, 1fr); }
  .snapshot-scroll {
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
}

/* 系统简报 */
.dash-brief { display: flex; flex-direction: column; }
.brief-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.brief-row:last-child { border-bottom: none; }
.brief-k { flex: 0 0 auto; font-size: var(--t-sm); color: var(--t2); }
.brief-v {
  min-width: 0;
  text-align: right;
  font-size: var(--t-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.brief-v.is-ok { color: var(--ok); }
.brief-v.is-warn { color: var(--warn); }
.brief-v.is-red { color: var(--red); }

/* 加载失败 / 空态 */
.dash-state, .dash-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
}
.dash-state p, .dash-empty p {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--t2);
}


/* ---------- 个人资料页共用栅格（R4-033）----------
   --pf-ico 32：账号安全行图标；--pf-indent 44 = 图标 + 12 栅格；
   --pf-av 44：头像统一尺寸（身份行 / 头像预览 / 预设头像）；
   --pf-row 78：行高基准（账号安全行实测高度），头像预览按它垂直居中。 */

body[data-page="account-profile"],
[data-profile-body] {
  --pf-ico: 32px;
  --pf-indent: 44px;
  --pf-av: 44px;
  --pf-row: 78px;
}

/* ---------- 身份行（R13-G12：左侧头像+昵称+绑定信息，右侧标签+操作，间距走 --gap 体系） ---------- */
.pf-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  flex-wrap: wrap;
  min-width: 0;
  line-height: 1.4;
}
.pf-id-l { display: flex; align-items: center; gap: var(--gap-s); min-width: 0; flex: 1 1 240px; }
.pf-id-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-id-r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.pf-id-act { white-space: nowrap; text-decoration: none; }
.pf-id .pf-av {
  width: var(--pf-av); height: var(--pf-av);
  flex: 0 0 auto; border-radius: 50%; overflow: hidden;
}
.pf-id-sub { margin-top: 12px; }
.pf-name {
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-bind {
  font-size: var(--t-xs);
  color: var(--t2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .pf-id-row { flex-direction: column; align-items: stretch; gap: var(--gap-s); }
  .pf-id-r { margin-left: 0; flex-wrap: wrap; }
}

/* ---------- 基本信息键值表 ---------- */
.pf-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  column-gap: var(--gap);
  margin: 0;
}
.pf-kv-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pf-kv-row:last-child { border-bottom: none; }
.pf-kv dt {
  flex: 0 0 92px;
  font-size: var(--t-sm);
  color: var(--t2);
}
.pf-kv dd {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pf-why { font-size: var(--t-xs); font-weight: 400; color: var(--t2); line-height: 1.7; }
.pf-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- 头像区 ---------- */
.avatar-prev { border-radius: 50%; }
.avatar-prev .hd-av-img { border-radius: 50%; }
.avatar-set { align-items: start; row-gap: 10px; }
.avatar-opts { min-width: 0; }
.avatar-opts .note { margin-top: 4px; }
.avatar-upload .input { flex: 1 1 240px; min-width: 0; max-width: 320px; }
.avatar-upload .btn { flex: 0 0 auto; }
.avatar-upload .note { flex: 1 1 100%; }

/* ---------- 注册页验证码行（R3-028）：输入框 + 发送按钮，按钮带倒计时 ---------- */
.code-field { margin-top: 16px; }
.code-row { display: flex; align-items: center; gap: 8px; }
.code-row .code-input {
  flex: 1 1 140px;
  min-width: 0;
  letter-spacing: .18em;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.code-row .code-send { flex: 0 0 auto; height: 40px; white-space: nowrap; }
.code-field .hint { margin-top: 6px; }

@media (max-width: 420px) {
  .code-row { flex-wrap: wrap; }
  .code-row .code-input { flex: 1 1 100%; }
  .code-row .code-send { flex: 1 1 100%; }
}

/* ---------- 账号安全（R3-020）：昵称 / 密码 / 邮箱验证 三项各一行 ---------- */
.pf-sec-list { display: flex; flex-direction: column; }

.pf-sec-item { border-bottom: 1px solid var(--line-soft); }
.pf-sec-item:last-child { border-bottom: none; }

/* 行头：图标 / 标题+当前状态 / 操作入口，同一行；窄屏才允许换行 */
.pf-sec-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 0;
}
.pf-sec-hd > .tag { flex: 0 0 auto; }
.pf-sec-hd > .btn { flex: 0 0 auto; margin-left: auto; }

.pf-sec-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pf-ico);
  height: var(--pf-ico);
  border-radius: var(--r-s);
  background: var(--blue-soft);
  color: var(--blue);
}
.pf-sec-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.pf-sec-main { flex: 1 1 auto; min-width: 0; }
.pf-sec-t { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.pf-sec-d {
  margin-top: 3px;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--t2);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.pf-sec-d b { font-weight: 500; color: var(--t1); }

/* 展开区：表单与提示 */
.pf-sec-body {
  padding: 4px 0 16px;
  padding-left: var(--pf-indent);
}
.pf-sec-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.pf-sec-form.stack { gap: 14px; }
.pf-sec-form .field { margin: 0; }
.pf-sec-form .meter { margin-top: 8px; }

.pf-sec-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* 邮箱验证码行：输入框 + 发送/确认，窄屏整行堆叠 */
.pf-verify-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 460px; }
.pf-verify-row .pf-code {
  flex: 1 1 150px;
  min-width: 0;
  letter-spacing: .18em;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.pf-verify-row .btn { flex: 0 0 auto; }

/* ---------- 窄屏：卡片内元素纵向堆叠，但身份行仍保持同一行 ---------- */
@media (max-width: 720px) {
  .pf-kv { grid-template-columns: 1fr; }
  .pf-kv-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pf-kv dt { flex: none; }
  .pf-id .pf-av { width: var(--pf-av); height: var(--pf-av); }
  .pf-id-l { gap: 8px; flex: 1 1 auto; }
  .pf-name { font-size: var(--t-body); }
  .avatar-set { grid-template-columns: var(--pf-av) minmax(0, 1fr); align-items: start; }
  .avatar-upload .input { max-width: none; flex: 1 1 100%; }

  /* 账号安全行：窄屏改为「图标 + 标题 / 状态 / 按钮」两行，不横向溢出 */
  .pf-sec-hd { flex-wrap: wrap; gap: 10px; }
  .pf-sec-hd > .btn { margin-left: var(--pf-indent); }
  .pf-sec-hd > .tag { margin-left: var(--pf-indent); }
  .pf-sec-body { padding-left: 0; }
  .pf-sec-form { max-width: none; }
  .pf-verify-row { max-width: none; }
  .pf-verify-row .pf-code { flex: 1 1 100%; }
}


/* R13-10 · 注册两步流程：步骤条 + 三个面板 + 完成态 */
.rg-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  gap: 8px;
}
.rg-step-i {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: var(--r-s);
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-size: var(--t-xs);
  color: var(--t2);
  white-space: nowrap;
}
.rg-i-n {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--line-soft);
  color: var(--t2);
  font-size: 11px;
  font-weight: 600;
}
.rg-step-i.is-on {
  color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.rg-step-i.is-on .rg-i-n,
.rg-step-i.is-done .rg-i-n {
  background: var(--blue);
  color: var(--on-blue);
}
.rg-step-i.is-done { color: var(--blue); }
.rg-pane[hidden] { display: none; }
.rg-tip {
  margin: 0 0 14px;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--t2);
}
.rg-tip b { color: var(--ink); font-weight: 600; }
.rg-acts {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rg-acts .btn { flex: 1 1 auto; }
.rg-done {
  text-align: center;
  padding: 18px 0 6px;
}
.rg-done-ico {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ok-soft);
}
.rg-done-ico svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rg-done-t {
  margin: 14px 0 4px;
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
}
.rg-done-s {
  margin: 0 0 18px;
  font-size: var(--t-sm);
  color: var(--t2);
}
.rg-done .btn { display: block; width: 100%; }
.rg-done .btn + .btn { margin-top: 10px; }
@media (max-width: 420px) {
  .rg-steps { gap: 6px; }
  .rg-step-i { padding: 8px 4px; font-size: 11px; }
  .otp .input { min-width: 0; }
}

/* ==================================================================
   R16 · 自助注销账号（profile.html 基本信息模块）
   危险色沿用 --red / --red-soft / --red-line（与退出登录横条同一套色），
   20 秒灯条口径同后台 R4-034 延迟删除：条从右向左缩短，期间可取消。
   ================================================================== */
.pf-del {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-del-hd { display: flex; align-items: center; gap: 8px; }
/* 下面几块自带 display（flex / inline-flex），会盖掉 UA 的 [hidden]{display:none}，
   必须显式补一条，否则确认区 / 灯条 / 「即将注销」标记在收起后仍然留在页面上 */
.pf-del-bar[hidden] { display: none; }
.pf-del-form[hidden] { display: none; }
.pf-del .tag[hidden] { display: none; }
.pf-del-open[hidden] { display: none; }
.pf-del-t { font-size: var(--t-sm); font-weight: 600; color: var(--red); }
.pf-del-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-del-pwd { flex: 1 1 220px; min-width: 0; max-width: 320px; }
.btn-red {
  background: var(--card); color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red-line);
}
.btn-red:hover { background: var(--red); color: var(--card); box-shadow: inset 0 0 0 1px var(--red); }
.btn-red:active { transform: translateY(1px); }
.btn-red:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.btn-red:disabled { opacity: .55; }

.pf-del-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-m);
  background: var(--red-soft); border: 1px solid var(--red-soft);
}
.pf-del-bar-t {
  flex: 0 1 auto; min-width: 0;
  font-size: var(--t-xs); font-weight: 500; color: var(--red);
  overflow-wrap: anywhere;
}
.pf-del-bar-track {
  position: relative; flex: 1 1 auto; min-width: 64px; height: 8px;
  border-radius: 999px; background: var(--card); overflow: hidden;
}
.pf-del-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  border-radius: 999px; background: var(--red);
  /* 靠左锚定、宽度 100% → 0：视觉上右边缘向左收缩 */
  transition: width 20s linear;
}
.pf-del-bar-fill.is-running { width: 0; }
.pf-del-bar-sec {
  flex: none; font-size: var(--t-xs); color: var(--red);
  font-variant-numeric: tabular-nums;
}
.pf-del-bar-cancel {
  flex: none; min-height: 28px; padding: 4px 12px;
  font-size: var(--t-xs); font-weight: 500; color: var(--t1);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-m); cursor: pointer; white-space: nowrap;
}
.pf-del-bar-cancel:hover { border-color: var(--blue-line); color: var(--blue); }
.pf-del-bar-cancel:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 680px) {
  .pf-del-bar { flex-wrap: wrap; }
  .pf-del-bar-t { flex: 1 1 100%; }
  .pf-del-form .btn-red { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-del-bar-fill { transition: none; }
}