/* 登录 / 注册门禁 —— 与项目既有暖米色 + 灰绿（Nike 极简）视觉一致 */

body.auth-locked {
  overflow: hidden;
}

body.auth-locked .app,
body.auth-locked .page {
  filter: blur(7px) saturate(0.75);
  pointer-events: none;
  user-select: none;
}

.login-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 16%, rgba(139, 157, 119, 0.22), transparent 52%),
    radial-gradient(circle at 84% 82%, rgba(201, 168, 118, 0.2), transparent 55%),
    rgba(250, 246, 241, 0.86);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  animation: lgFade 0.32s ease both;
}

.login-gate[hidden] {
  display: none;
}

@keyframes lgFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lg-card {
  width: 100%;
  max-width: 430px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #faf6f1;
  border: 1px solid #e3dcd2;
  border-radius: 20px;
  padding: 30px 30px 26px;
  box-shadow: 0 22px 60px -18px rgba(79, 68, 55, 0.28), 0 2px 6px rgba(79, 68, 55, 0.05);
  animation: lgRise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lgRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.lg-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.lg-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: none;
  background:
    radial-gradient(circle at 32% 28%, #a8bb90, #7f9269 68%, #6d7d59);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.45);
}

.lg-brand h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: 0.3px;
  color: #3f3a33;
}

.lg-brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #9b917f;
}

.lg-sub {
  margin: 14px 0 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8b8272;
}

.lg-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #f1ebe2;
  border-radius: 12px;
  margin-bottom: 18px;
}

.lg-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 8px;
  border-radius: 9px;
  font-size: 13px;
  color: #8b8272;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  font-family: inherit;
}

.lg-tab:hover {
  color: #5d5548;
}

.lg-tab.is-active {
  background: #faf6f1;
  color: #3f3a33;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(79, 68, 55, 0.1);
}

.lg-pane {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.lg-pane[hidden] {
  display: none;
}

/* 表单本身不是面板，只是把字段纵向排列 */
.lg-stack {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
}

.lg-divider {
  margin: 18px 0 4px;
  font-size: 12px;
  color: #a89e8c;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lg-divider::before,
.lg-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #eee7dc;
}

.lg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lg-field > label {
  font-size: 12px;
  color: #8b8272;
  letter-spacing: 0.2px;
}

.lg-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid #e3dcd2;
  border-radius: 11px;
  background: #fffdfa;
  font-size: 14px;
  color: #3f3a33;
  font-family: inherit;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.lg-field input::placeholder {
  color: #bdb3a3;
}

.lg-field input:focus {
  outline: none;
  border-color: #9cae83;
  box-shadow: 0 0 0 3px rgba(156, 174, 131, 0.18);
}

.lg-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.lg-row input {
  flex: 1;
  min-width: 0;
}

.lg-row .lg-inline {
  flex: none;
  padding: 0 14px;
  border: 1px solid #d9d1c4;
  border-radius: 11px;
  background: #f4efe7;
  color: #6b6353;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.16s ease;
}

.lg-row .lg-inline:hover:not(:disabled) {
  background: #ebe4d9;
}

.lg-row .lg-inline:disabled {
  opacity: 0.6;
  cursor: default;
}

.lg-submit {
  margin-top: 4px;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  background: #7f9269;
  color: #fdfbf7;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.16s ease, transform 0.12s ease;
}

.lg-submit:hover:not(:disabled) {
  background: #6f8359;
}

.lg-submit:active:not(:disabled) {
  transform: translateY(1px);
}

.lg-submit:disabled {
  opacity: 0.65;
  cursor: default;
}

.lg-link {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-size: 12.5px;
  color: #8b9d77;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lg-link:hover {
  color: #6f8359;
}

.lg-msg {
  min-height: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 9px;
  padding: 0;
  transition: padding 0.16s ease;
}

.lg-msg:empty {
  padding: 0;
}

.lg-msg.is-error,
.lg-msg.is-ok,
.lg-msg.is-info {
  padding: 9px 12px;
}

.lg-msg.is-error {
  background: #fbeeea;
  color: #a5462f;
}

.lg-msg.is-ok {
  background: #eef3e7;
  color: #5d7347;
}

.lg-msg.is-info {
  background: #f2eee6;
  color: #7a715f;
}

.lg-hint {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eee7dc;
  font-size: 11.5px;
  line-height: 1.7;
  color: #a89e8c;
}

/* 登录卡片底部的版权 + ICP 备案号（画布页不再显示，见 canvas.css 里的说明）。
   放在卡片内而不是 fixed 贴底：门禁本身就是一屏，居中排版更稳，也不会漏掉。 */
.lg-beian {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.7;
  color: #a89e8c;
}
.lg-beian .footer-sep { margin: 0 6px; opacity: .5; }
.lg-beian a {
  color: #8c7c6d;
  text-decoration: none;
  border-bottom: 1px solid rgba(140, 124, 109, 0.4);
}
.lg-beian a:hover { color: #5c4033; border-color: #5c4033; }

/* 表单内的小字说明（如「还没有账号？去注册」） */
.lg-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: #a89e8c;
}

/* 顶栏用户区 */
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid #e3dcd2;
  border-radius: 999px;
  background: #fdfbf7;
  /* ⚠️ 原来只有 210px：扣掉内边距/头像/间距后留给文字约 134px，
     12px 字号下只放得下 ~20 个拉丁字符 —— 任何真实邮箱都会被省略号砍掉一半。
     「管理员」登录时顶栏多两个按钮，还会再被挤窄。 */
  max-width: 260px;
  /* 不参与收缩：顶栏按钮变多时优先压缩别处，而不是把这个账号挤没 */
  flex: none;
}

.user-avatar {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #a8bb90, #7f9269);
  color: #fdfbf7;
  font-size: 11px;
  font-weight: 700;
}

.user-email {
  font-size: 12px;
  color: #6b6353;
  /* min-width:0 是 flex 子项能被压缩的前提（默认 auto 会拒绝收缩），
     配合下面的省略号，昵称过长时优雅截断而不是撑破 chip */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-out {
  border: none;
  background: none;
  padding: 2px;
  display: grid;
  place-items: center;
  color: #a89e8c;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.16s ease, background 0.16s ease;
}

.user-out:hover {
  color: #a5462f;
  background: #fbeeea;
}

.user-out svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 520px) {
  .lg-card {
    padding: 24px 20px 20px;
    border-radius: 16px;
  }
  .login-gate {
    padding: 14px;
    align-items: flex-start;
    padding-top: 8vh;
  }
}

/* ---------------------------------------------------------------------------
   管理员专属元素
   默认隐藏；登录后由 auth.js 的 applyAdminFlag() 依据 admins 表判定来显示。
   .tool-btn 等自带 display: inline-flex，会盖掉浏览器默认的 [hidden]，
   所以这里必须显式声明，不能只靠 hidden 属性。
--------------------------------------------------------------------------- */
[data-admin-only][hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   积分胶囊
--------------------------------------------------------------------------- */
.credit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e3dcd2;
  background: #fdfbf7;
  color: #6b5b50;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.credit-chip[hidden] {
  display: none !important;
}

.credit-chip svg {
  width: 15px;
  height: 15px;
  color: #d4a373;
}

/* 余额不足时转为警示色 */
.credit-chip.is-low {
  border-color: #e2b8ad;
  background: #fbeeea;
  color: #a5462f;
}

.credit-chip.is-low svg {
  color: #a5462f;
}