/* views/account.css — 我的账户自助配置(W-SS-1 passkey 面板 + W-SS-2 OTP 邮箱面板;CTO 合并)。 */
/* ===== W-SS-1 passkey panel ===== */
/* css/views/account.css — 视图私有样式,owner: account 视图(W-SS-1 passkey 面板)。
 * 只许本视图写;全部选择器前缀 .v-account;颜色/间距/圆角用 var(--*)(DESIGN.md)。
 * 仪式 modal 复用 stepup.css 的 .v-stepup-*(同一套抗钓鱼步骤样式,不另造)。 */

/* secure-context 不支持时的提示条:warning tint 底 + 左缘信号条(镜像全站警示信号)。 */
.v-account-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 1.5;
}

.v-account-note-warn {
  background: var(--color-warning-tint);
  color: var(--color-warning);
  border-left: 3px solid var(--color-warning);
}

/* 两张灰卡之间留 16px(原先这档间距挂在已删除的摘要卡上)。 */
.v-account-passkeys { margin-bottom: var(--space-4); }

/* passkey 列表卡的版头:标题+ⓘ 在左,身份/因子摘要行在右(原摘要卡并入)。 */
.v-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.v-account-head .card-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}

/* 摘要行:小字灰色单行;过长交给 title 悬浮兜底。 */
.v-account-factors {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 标题旁 ⓘ:对拍 .v-status-info(muted 常态,hover 加深,可聚焦)。 */
.v-account-info {
  display: inline-flex;
  color: var(--color-text-muted);
  cursor: help;
}
.v-account-info:hover { color: var(--color-text-secondary); }
.v-account-info:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* passkey 空态的圆形密钥图标转正:全局 key 形状是 45° 斜钥匙(共享资产不动),
   本屏空态逆时针回正成立式钥匙。 */
.v-account-passkeys .state-icon .icon { transform: rotate(-45deg); }

/* 空态收紧:上下留白从 32px 收到 24px,整块空态控制在 ~240px 内。 */
.v-account-canvas .card .state { padding: var(--space-6) var(--space-4); }

.v-account-sub {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* 算法标签:等宽小药丸,中性表面(凭据是公开元数据,不用语义色)。 */
.v-account-alg {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ===== W-SS-2 OTP-email panel ===== */
/* views/account.css — 「我的账号」自助视图(W-SS)。
   Tokens only(DESIGN.md):无硬编码 hex;复用 .card / .btn / .field / .badge 壳。 */

.v-account-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
}

.v-account-otp.card {
  padding: var(--space-6);
}

/* Prefixed (not global .card-*): account.js is a SHELL shared with W-SS-1's passkey
   panel, so these must never collide with classes W-SS-1 might also introduce. */
.v-account-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.v-account-card-head .card-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}

.v-account-card-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--radius-control);
  background: var(--color-accent-tint);
  color: var(--color-accent-strong);
}

.v-account-otp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.v-account-otp-label {
  color: var(--color-text);
  font-size: 14px;
}

.v-account-otp-actions {
  margin-top: var(--space-4);
}

.v-account-otp-panel {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.v-account-otp-target {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  margin: 0 0 var(--space-3);
}

.v-account-otp-err-box {
  margin: var(--space-2) 0;
}

.v-account-otp-err {
  color: var(--color-danger);
  font-size: 13px;
  margin: 0;
}

/* ---- 白画布 + 版头(§9g,2026-07-14,P2 轻改):主动作上区块版头,页头槽退役 ---- */
.v-account-canvas {
  background: var(--color-surface);
  border-radius: 24px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.v-account-canvas .section { margin-bottom: 0; }
.v-account-sub { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-2); }
.v-account-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.v-account-sec-head .section-title { margin-bottom: 0; }
.v-account-canvas .table th,
.v-account-canvas .table td { white-space: nowrap; } /* 基础排版:不竖排 */
/* 画布内老 .card 面板转灰卡(§9g 第二层) */
.v-account-canvas .card {
  background: var(--color-card);
  border: none;
  box-shadow: none;
  border-radius: 18px;
}