/* ============================================================
   账号页样式 —— 仅 login.html 与 account.html 引入
   ------------------------------------------------------------
   与 css/style.css 的分工：公共导航、轻提示、内容页操作条
   （.nav-account* / .bw-cloud-toast / .ca-*）在 style.css，
   这里只放「登录页」与「我的页」自身的版式。
   设计沿用站点水墨纸感：宣纸底、朱红主色、金线描边。
   ============================================================ */

.page.auth-page,
.page.acct-page { max-width: 940px; }

/* ---------- 登录卡片 ---------- */
.auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 38px 30px;
  max-width: 560px;
  margin: 26px auto 60px;
}
.auth-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.auth-head .seal { flex-shrink: 0; }
.auth-title {
  font-size: 25px; font-weight: 700; letter-spacing: 5px; color: var(--ink);
}
.auth-sub {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.8; margin-top: 4px;
}

.auth-env {
  font-size: 13px; line-height: 1.75;
  color: #8a6a2f;
  background: rgba(176, 141, 87, 0.13);
  border: 1px solid rgba(176, 141, 87, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
}

/* ---------- 方式切换 ---------- */
.auth-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.auth-tab {
  font-family: inherit; font-size: 14.5px; letter-spacing: 2px;
  color: var(--ink-faint);
  background: transparent; border: 0;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.auth-tab:hover { color: var(--cinnabar); }
.auth-tab.active { color: var(--cinnabar); border-color: var(--cinnabar); font-weight: 700; }

/* ---------- 表单 ---------- */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
/* 关键：作者样式 .auth-form{display:flex} 会盖掉浏览器默认的 [hidden]{display:none}，
   不补这条，登录/注册/找回密码/改密 5 个表单会全部叠在一页 */
.auth-form[hidden] { display: none !important; }
.af-field { display: flex; flex-direction: column; gap: 6px; }
.af-field > span {
  font-size: 13px; letter-spacing: 2px; color: var(--ink-soft);
}
.af-field input {
  font-family: inherit; font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 13px;
  transition: border-color 0.2s;
}
.af-field input:focus { outline: none; border-color: var(--gold); background: var(--card); }

.af-field-code { position: relative; }
.af-field-code input { padding-right: 116px; }
.af-code-btn {
  position: absolute; right: 6px; bottom: 5px;
  font-family: inherit; font-size: 13px; letter-spacing: 1px;
  color: var(--cinnabar);
  background: transparent;
  border: 1px solid var(--cinnabar);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.af-code-btn:hover:not(:disabled) { background: var(--cinnabar); color: #fffef8; }
.af-code-btn:disabled { opacity: 0.55; cursor: default; color: var(--ink-faint); border-color: var(--line); }

.af-row { margin-top: 4px; }
.af-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  font-family: inherit; font-size: 15.5px; letter-spacing: 6px;
  color: #fffef8;
  background: var(--cinnabar);
  border: 1px solid var(--cinnabar);
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(140, 47, 34, 0.28);
  transition: background 0.2s, transform 0.15s;
}
.af-submit:hover { background: var(--cinnabar-deep); }
.af-submit:active { transform: translateY(1px); }
.af-submit:disabled { opacity: 0.6; cursor: default; }

.af-links { display: flex; justify-content: flex-end; gap: 16px; }
.af-link {
  font-family: inherit; font-size: 13.5px; letter-spacing: 1px;
  color: var(--ink-soft);
  background: transparent; border: 0; padding: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.af-link:hover { color: var(--cinnabar); border-color: var(--cinnabar); }

.af-note { font-size: 12.5px; color: var(--ink-faint); line-height: 1.75; }

/* ---------- 反馈 ---------- */
.auth-msg {
  margin-top: 18px;
  font-size: 13.5px; line-height: 1.7;
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
}
.auth-msg.is-ok { color: #3f6b4c; border-color: rgba(93, 122, 99, 0.45); background: rgba(93, 122, 99, 0.1); }
.auth-msg.is-error { color: #8c2f22; border-color: rgba(166, 58, 43, 0.45); background: rgba(166, 58, 43, 0.08); }
.auth-msg.is-info { color: #7a5f2c; border-color: rgba(176, 141, 87, 0.45); background: rgba(176, 141, 87, 0.1); }

/* ---------- 已登录状态 ---------- */
.auth-signin-state {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px dashed var(--line);
  font-size: 14px; color: var(--ink-soft);
}
.ass-line b { color: var(--ink); }
.ass-actions { display: flex; gap: 18px; margin-top: 10px; }

/* ---------- 注册审核：待审核 / 未通过时整块替掉登录表单 ---------- */
.auth-review { text-align: center; padding: 10px 4px 4px; }
.auth-review-mark {
  width: 46px; height: 46px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(176, 141, 87, 0.16);
  border: 1px solid rgba(176, 141, 87, 0.45);
  color: var(--gold);
  font-size: 20px;
}
.auth-review-title { font-size: 20px; letter-spacing: 3px; color: var(--ink); }
.auth-review-sub { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.9; }
.auth-review-who { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }
.auth-review-who b { color: var(--ink); }
.auth-review-actions {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px;
}
.auth-review-actions .af-submit { width: auto; min-width: 200px; letter-spacing: 3px; }
.auth-review .af-note { margin-top: 16px; }

/* ============================================================
   「我的」页
   ============================================================ */
.acct-gate {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 56px 32px 52px;
  margin: 30px auto 70px;
  max-width: 620px;
}
.acct-gate .seal { width: 46px; height: 46px; font-size: 25px; margin-bottom: 16px; }
.acct-gate-title { font-size: 22px; letter-spacing: 3px; color: var(--ink); }
.acct-gate-sub { font-size: 14px; color: var(--ink-soft); margin: 12px 0 26px; line-height: 1.85; }
.acct-gate-actions {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.acct-gate-actions .af-submit { width: auto; min-width: 220px; letter-spacing: 3px; }

.acct-head {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: space-between;
  padding: 26px 0 18px;
  border-bottom: 1px solid var(--line);
}
.acct-title { font-size: 26px; font-weight: 700; letter-spacing: 6px; color: var(--ink); }
.acct-sub { font-size: 13.5px; color: var(--ink-faint); margin-top: 4px; line-height: 1.7; }
.acct-head-actions { display: flex; gap: 18px; align-items: center; }

.acct-stats { display: flex; flex-wrap: wrap; gap: 22px; padding: 16px 0 4px; }
.acct-stat { font-size: 14px; color: var(--ink-soft); letter-spacing: 1px; }
.acct-stat b { font-size: 20px; color: var(--cinnabar); margin-right: 4px; }

.acct-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid var(--line);
  margin: 18px 0 22px;
}
.acct-tab {
  font-family: inherit; font-size: 15px; letter-spacing: 2px;
  color: var(--ink-faint);
  background: transparent; border: 0;
  padding: 9px 16px; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 0.2s, border-color 0.2s;
}
.acct-tab:hover { color: var(--cinnabar); }
.acct-tab.active { color: var(--cinnabar); border-color: var(--cinnabar); font-weight: 700; }
.acct-count {
  font-style: normal; font-size: 11.5px;
  background: var(--paper-deep); color: var(--ink-soft);
  border-radius: 999px; padding: 0 7px; line-height: 17px;
}
.acct-tab.active .acct-count { background: var(--cinnabar); color: #fffef8; }

.acct-list { display: flex; flex-direction: column; gap: 14px; padding-bottom: 60px; }
.acct-empty {
  text-align: center; padding: 48px 20px;
  color: var(--ink-faint); font-size: 14px; letter-spacing: 2px; line-height: 2;
}
.acct-item {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  transition: box-shadow 0.2s;
}
.acct-item:hover { box-shadow: var(--shadow-hover); }
.acct-item-main { flex: 1; min-width: 0; }
.acct-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.acct-tag {
  font-size: 11.5px; letter-spacing: 1px;
  color: #fffef8; background: var(--gold);
  border-radius: 4px; padding: 1px 7px;
}
.acct-item-title {
  font-size: 16px; color: var(--ink); letter-spacing: 1px;
  border-bottom: 1px solid transparent;
}
a.acct-item-title:hover { color: var(--cinnabar); border-color: var(--cinnabar); }
.acct-item-sub { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
.acct-item-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 7px; }
.acct-item-ops { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }

.acct-btn {
  font-family: inherit; font-size: 13px; letter-spacing: 1px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.acct-btn:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.acct-btn.danger:hover { background: rgba(166, 58, 43, 0.9); border-color: var(--cinnabar); color: #fffef8; }
.acct-btn.primary { background: var(--cinnabar); border-color: var(--cinnabar); color: #fffef8; }
.acct-btn.primary:hover { background: var(--cinnabar-deep); }
.acct-btn:disabled { opacity: 0.6; cursor: default; }

.acct-note-body {
  font-size: 15px; line-height: 1.85; color: var(--ink);
  white-space: pre-wrap; margin-top: 8px;
}
.acct-note-edit { margin-top: 8px; }
.acct-note-input {
  width: 100%;
  font-family: inherit; font-size: 15px; line-height: 1.8;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; resize: vertical;
}
.acct-note-input:focus { outline: none; border-color: var(--gold); }
.acct-note-edit-ops { display: flex; gap: 10px; margin-top: 8px; }

.acct-done {
  font-size: 11.5px; color: #fffef8; background: var(--jade);
  border-radius: 4px; padding: 1px 7px; letter-spacing: 1px;
}
.acct-bar {
  height: 5px; border-radius: 999px; background: var(--paper-deep);
  margin: 9px 0 4px; max-width: 320px; overflow: hidden;
}
.acct-bar span { display: block; height: 100%; background: var(--gold); }

@media (max-width: 720px) {
  .auth-card { padding: 26px 20px 24px; margin: 16px auto 44px; }
  .auth-title { font-size: 21px; letter-spacing: 3px; }
  .af-submit { letter-spacing: 3px; }
  .acct-item { flex-direction: column; }
  .acct-item-ops { flex-direction: row; }
  .acct-title { font-size: 21px; letter-spacing: 3px; }
}