/* 账号菜单 + 改密弹窗：每个页面都要用，所以单独成文件，谁需要谁引 */

/* ===== 账号菜单（所有页面的导航栏共用） ===== */
.acct { position: relative; }
.acct__btn {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: .15s; max-width: 180px;
}
.acct__btn::-webkit-details-marker { display: none; }
.acct__btn:hover { border-color: #cfe8dd; }
.acct[open] .acct__btn { border-color: var(--brand); color: var(--brand); }
.acct__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__car {
  width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .55;
  transition: transform .15s;
}
.acct[open] .acct__car { transform: rotate(180deg); }
.acct__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90;
  min-width: 148px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
}
.acct__menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--ink);
  background: none; border: 0; border-radius: 8px; cursor: pointer; transition: .12s;
}
.acct__menu button:hover { background: #f1f7fa; }
.acct__menu button[data-act="logout"] { color: #dc2626; }
.acct__menu button[data-act="logout"]:hover { background: #fef2f2; }

/* ===== 改密弹窗 ===== */
.acct-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 23, 42, .45);
}
.acct-modal__box {
  width: 100%; max-width: 344px;
  background: #fff; border-radius: 14px; padding: 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.acct-modal__box h3 { margin: 0 0 4px; font-size: 17px; }
.acct-modal__sub { margin: 0 0 16px; font-size: 12px; color: var(--muted); }
.acct-modal__box label { display: block; margin-bottom: 12px; }
.acct-modal__box label > span {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px;
}
.acct-modal__box input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink);
  background: #fbfcfd; border: 1px solid var(--line); border-radius: 9px; outline: none; transition: .15s;
}
.acct-modal__box input:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(16,185,129,.13); }
.acct-modal__msg { margin: 0; font-size: 12.5px; color: #dc2626; min-height: 0; }
.acct-modal__msg:empty { display: none; }
.acct-modal__msg.is-ok { color: var(--brand); }
.acct-modal__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.acct-modal__foot .btn { padding: 8px 18px; }

/* 挂载容器本身不占宽度，里面的按钮自己撑 */
#navAcct { display: flex; align-items: center; }

/* ===== 恢复码卡片 ===== */
.rc-box { max-width: 400px; }
.rc-box h3 { margin: 0 0 6px; font-size: 17px; }
.rc-box .acct-modal__sub strong { color: #b45309; }
.rc-code {
  display: block;
  margin: 14px 0 12px;
  padding: 14px 12px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  color: var(--ink);
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  user-select: all;
  word-break: break-all;
}
.rc-acts { display: flex; gap: 10px; }
.rc-acts .btn { flex: 1; justify-content: center; padding: 8px 12px; font-size: 13px; }
.rc-msg { margin: 10px 0 0; min-height: 0; font-size: 12.5px; color: #dc2626; }
.rc-msg:empty { display: none; }
.rc-msg.is-ok { color: var(--brand); }
.rc-ack {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; font-size: 13px; color: var(--ink); cursor: pointer;
}
.rc-ack input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }