/* ==========================================================================
   views/auth.css — 账号与访问（09 视图层）
   跟随 base.css 的主题变量与全局组件风格（2px 圆角、虚线分隔、等宽元信息）。
   ========================================================================== */

/* ---------- 卡片头 ---------- */

.acct-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.acct-title { font-size: 16px; font-weight: 700; }
.acct-sub { font-size: 12px; color: var(--sub); margin-top: 4px; line-height: 1.6; }
.acct-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* ---------- 账号列表 ---------- */

.acct-list { display: flex; flex-direction: column; }
.acct-list-off { margin-top: 4px; }
.acct-foot { display: flex; justify-content: center; gap: 8px; padding-top: 14px; }

.acct-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px dashed var(--border);
}
.acct-row:first-child { border-top: none; }
.acct-row.is-off { opacity: 0.55; }

.acct-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 2px;
  border: 1px solid var(--border);
  background-color: var(--soft-panel);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
}
.acct-avatar.off { border-style: dashed; }

.acct-main { flex: 1 1 auto; min-width: 0; }
.acct-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-name { font-size: 14px; font-weight: 600; }
.acct-meta {
  font-size: 11px;
  color: var(--sub);
  margin-top: 5px;
  word-break: break-all;
  line-height: 1.6;
}

.acct-actions { display: flex; gap: 6px; flex: 0 0 auto; align-items: center; }
.acct-danger { color: var(--red-500); border-color: rgba(239, 68, 68, 0.3); }
.acct-danger:hover { background-color: rgba(239, 68, 68, 0.08); }
.acct-off-tag { font-size: 11px; color: var(--sub); }

/* ---------- 密码只显示一次 ---------- */

.acct-reveal {
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 2px;
  background-color: rgba(16, 185, 129, 0.06);
  padding: 14px 16px;
}
.acct-reveal-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--emerald-600);
}
.acct-reveal-name { font-size: 12px; color: var(--sub); margin-top: 8px; }
.acct-reveal-value {
  font-size: 14px;
  word-break: break-all;
  margin: 6px 0 12px;
  padding: 10px 12px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background-color: var(--card-bg);
}
.acct-reveal-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 开关行 ---------- */

.acct-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px dashed var(--border);
}
.acct-switch-row:first-of-type { border-top: none; }
.acct-switch-main { flex: 1 1 auto; min-width: 0; }
.acct-switch-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.acct-switch-desc { font-size: 12.5px; line-height: 1.6; color: var(--sub); }

.auth-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--sub);
}
.auth-switch.on { color: var(--emerald-600); }
.auth-switch-track {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background-color: var(--rail-border);
  transition: background-color 0.18s ease;
}
.auth-switch.on .auth-switch-track { background-color: var(--emerald-500); }
.auth-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}
.auth-switch.on .auth-switch-knob { transform: translateX(18px); }
.auth-switch-label { font-size: 10.5px; letter-spacing: 0.06em; }

/* ---------- 地址 ---------- */

.acct-addresses { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.acct-address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background-color: var(--card-bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.acct-address:hover { background-color: var(--hover); }

/* ---------- 弹窗 ---------- */

.acct-modal { max-width: 420px; }
.acct-x { font-size: 20px; line-height: 1; display: block; }
.acct-pass-row { display: flex; align-items: center; gap: 8px; }
.acct-pass-row .modal-input { flex: 1 1 auto; }
.acct-pass-row .btn-pill { flex: 0 0 auto; white-space: nowrap; }
.acct-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}
.acct-all input { accent-color: var(--accent); }

.auth-scopes { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-scopes.is-dim { opacity: 0.5; }
.auth-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 12px;
  cursor: pointer;
}
.auth-scope.on { border-color: var(--accent); color: var(--accent); background-color: rgba(91, 159, 211, 0.08); }
.auth-scope.disabled { opacity: 0.4; cursor: not-allowed; }
.auth-scope input { accent-color: var(--accent); }

/* ---------- 杂项 ---------- */

.auth-hint { margin-top: 8px; font-size: 12px; color: var(--sub); line-height: 1.6; }
.auth-empty { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 22px; }

.auth-toast {
  border-radius: 2px;
  padding: 10px 14px;
  font-size: 12.5px;
  border: 1px solid var(--border);
  border-left-width: 3px;
}
.auth-toast-ok { border-left-color: var(--emerald-500); color: var(--emerald-600); }
.auth-toast-error { border-left-color: var(--red-500); color: var(--red-500); }

@media (max-width: 720px) {
  .acct-row { flex-wrap: wrap; }
  .acct-switch-row { flex-direction: column; gap: 10px; }
  .auth-switch { align-self: flex-start; }
}