/* ===== 登录/注册遮罩与卡片 =====
   登录页标题和字段在 index.html，交互和错误提示在 auth.js。 */
.auth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
  display: flex; align-items: center; justify-content: center;
}
.auth-card {
  background: #fff; border-radius: 20px; padding: 40px 36px;
  width: 420px; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.auth-card h2 { text-align: center; margin-bottom: 8px; font-size: 24px; color: #0f172a; }
.auth-card p { text-align: center; color: #64748b; margin-bottom: 24px; font-size: 14px; }
.auth-card .form-group { margin-bottom: 16px; }
.auth-card label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%; padding: 12px 14px; border: 1.5px solid #dbe7f3;
  border-radius: 10px; font-size: 14px; transition: border-color 0.2s;
  outline: none; background: #f8fafc;
}
.auth-card input:focus { border-color: #0056D2; background: #fff; }
.auth-card .btn-primary {
  width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #0056D2 0%, #1890FF 100%);
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  margin-top: 8px; transition: opacity 0.2s;
}
.auth-card .btn-primary:hover { opacity: 0.9; }
.auth-card .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-card .auth-switch { text-align: center; margin-top: 16px; font-size: 13px; color: #64748b; }
.auth-card .auth-switch a { color: #0056D2; cursor: pointer; font-weight: 600; text-decoration: none; }
.auth-card .auth-error { color: #dc2626; font-size: 13px; text-align: center; margin-top: 8px; min-height: 20px; }

/* ===== 顶栏个人中心菜单 =====
   菜单 HTML 在 auth.js 的 renderAccountActions()，这里控制头像、下拉层和退出按钮。 */
.top-bar-actions { display: flex; align-items: center; gap: 10px; }
.top-bar-account { position: relative; }
.account-trigger {
  min-height: 42px; display: flex; align-items: center; gap: 9px;
  padding: 5px 9px; border: 1px solid #dbe7f3; border-radius: 11px;
  color: #334155; background: #fff; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,23,42,.04); transition: border-color .2s, box-shadow .2s;
}
.account-trigger:hover, .top-bar-account.open .account-trigger { border-color: #93c5fd; box-shadow: 0 6px 16px rgba(37,99,235,.10); }
.account-avatar {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 30px; border-radius: 9px; color: #fff; background: linear-gradient(145deg,#3b82f6,#1456c4);
}
.account-avatar.large { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
.account-trigger-copy { display: grid; min-width: 72px; text-align: left; line-height: 1.15; }
.account-trigger-copy b { max-width: 110px; overflow: hidden; color: #1e293b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger-copy small { margin-top: 3px; color: #94a3b8; font-size: 10px; }
.account-chevron { color: #94a3b8; font-size: 9px; transition: transform .2s; }
.top-bar-account.open .account-chevron { transform: rotate(180deg); }
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 220px;
  padding: 8px; border: 1px solid #dbe7f3; border-radius: 13px; background: #fff;
  box-shadow: 0 18px 45px rgba(15,23,42,.16);
}
.account-menu[hidden] { display: none; }
.account-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid #edf2f7; }
.account-menu-head div { display: grid; gap: 3px; min-width: 0; }
.account-menu-head b { overflow: hidden; color: #1e293b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-head span { color: #94a3b8; font-size: 10px; }
.account-logout {
  width: 100%; display: flex; align-items: center; gap: 9px; margin-top: 6px; padding: 9px 10px;
  border: 0; border-radius: 9px; color: #dc2626; background: transparent; font-family: inherit;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.account-logout:hover { background: #fef2f2; }

/* 手机宽度下隐藏用户名文字，只保留头像，避免顶栏拥挤。 */
@media (max-width: 640px) {
  .top-bar-actions { width: 100%; justify-content: space-between; }
  .account-trigger-copy { display: none; }
  .account-trigger { padding: 5px 7px; }
}