/* 自然分析科技官网 · 账号接入样式（KnoWeave 账号中心）
 * 配套 assets/auth.js：头部登录入口、登录/注册弹窗、登录态菜单。
 * 只新增 .na-* 前缀类，不覆盖 site.css 的任何规则；
 * 颜色/圆角/阴影全部引用 site.css 的 --ax-* 设计令牌，保证观感一致。
 */

/* ---------------- 头部入口（未登录 = 按钮；已登录 = 头像胶囊） ---------------- */
.na-auth-wrap { position: relative; flex: 0 0 auto; margin-left: 8px; }

.na-auth-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--ax-line-2); border-radius: var(--ax-r-sm);
  background: var(--ax-bg); color: var(--ax-ink-2);
  font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1.4;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.na-auth-btn:hover { border-color: var(--ax-ink-3); color: var(--ax-ink); }

.na-auth-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border: 1px solid var(--ax-line-2); border-radius: 999px;
  background: var(--ax-bg); color: var(--ax-ink);
  font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1.4;
  cursor: pointer; white-space: nowrap; max-width: 190px;
  transition: border-color 0.15s, background 0.15s;
}
.na-auth-chip:hover { border-color: var(--ax-teal-line); background: var(--ax-teal-soft); }

.na-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ax-teal); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
  user-select: none;
}
.na-auth-chip .na-chip-name {
  overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}

/* 下拉菜单（进入 KnoWeave / 退出登录） */
.na-auth-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 218px; padding: 8px;
  background: var(--ax-bg); border: 1px solid var(--ax-line); border-radius: var(--ax-r);
  box-shadow: var(--ax-shadow-lg);
  display: none;
}
.na-auth-menu.is-open { display: block; }
.na-auth-menu__who {
  padding: 10px 10px 9px; margin-bottom: 6px;
  border-bottom: 1px solid var(--ax-line);
}
.na-auth-menu__who strong { display: block; font-size: var(--ax-fs-sm); color: var(--ax-ink); line-height: 1.4; }
.na-auth-menu__who span { display: block; font-size: 12px; color: var(--ax-ink-3); line-height: 1.5; }
.na-auth-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--ax-r-sm);
  background: none; color: var(--ax-ink-2);
  font-size: var(--ax-fs-sm); font-weight: 500; font-family: inherit;
  text-align: left; text-decoration: none; cursor: pointer;
}
.na-auth-menu__item:hover { background: var(--ax-bg-3); color: var(--ax-ink); text-decoration: none; }
.na-auth-menu__item--out:hover { background: var(--ax-red-soft); color: var(--ax-red-ink); }

/* ---------------- 登录 / 注册弹窗 ---------------- */
.na-auth-modal {
  border: 0; padding: 0;
  width: min(410px, calc(100vw - 32px));
  border-radius: var(--ax-r-lg);
  box-shadow: var(--ax-shadow-lg);
  color: var(--ax-ink);
}
.na-auth-modal::backdrop { background: rgba(15, 23, 42, 0.45); }
/* 无 <dialog> 支持的极老浏览器兜底：加 is-fallback 后手动定位显示 */
.na-auth-modal.is-fallback { display: none; position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); z-index: 80; }
.na-auth-modal.is-fallback.is-open { display: block; }

.na-auth-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 24px 0;
}
.na-auth-title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.na-auth-sub { margin: 4px 0 0; font-size: 13px; color: var(--ax-ink-3); line-height: 1.55; }
.na-auth-x {
  flex: 0 0 auto; width: 34px; height: 34px; margin: -4px -6px 0 0;
  border: 0; border-radius: var(--ax-r-sm); background: none;
  color: var(--ax-ink-3); font-size: 20px; line-height: 1; cursor: pointer;
}
.na-auth-x:hover { background: var(--ax-bg-3); color: var(--ax-ink); }

.na-tabs {
  display: flex; gap: 2px; margin: 16px 24px 0;
  border-bottom: 1px solid var(--ax-line);
}
.na-tab {
  padding: 10px 14px 11px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--ax-ink-3);
  font-size: var(--ax-fs-sm); font-weight: 600; font-family: inherit; cursor: pointer;
  margin-bottom: -1px;
}
.na-tab[aria-selected="true"] { color: var(--ax-teal); border-bottom-color: var(--ax-teal); }
.na-tab:hover { color: var(--ax-ink); }

.na-auth-form { display: none; padding: 18px 24px 24px; }
.na-auth-form.is-active { display: block; }

.na-field { margin-bottom: 14px; }
.na-field label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ax-ink-2);
}
.na-field label .na-opt { font-weight: 400; color: var(--ax-ink-3); }
.na-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--ax-line-2); border-radius: var(--ax-r-sm);
  background: var(--ax-bg); color: var(--ax-ink);
  font-size: var(--ax-fs-sm); font-family: inherit; line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.na-input:focus {
  outline: none; border-color: var(--ax-teal);
  box-shadow: 0 0 0 3px var(--ax-teal-soft);
}
.na-hint { margin-top: 5px; font-size: 12px; color: var(--ax-ink-3); line-height: 1.5; }
.na-hint--ok { color: #0a7d43; }
.na-hint--bad { color: var(--ax-red-ink); }

.na-msg {
  display: none; margin-bottom: 14px; padding: 10px 12px;
  border-radius: var(--ax-r-sm); font-size: 13px; line-height: 1.55;
}
.na-msg.is-shown { display: block; }
.na-msg--err { background: var(--ax-red-soft); color: var(--ax-red-ink); }
.na-msg--ok { background: var(--ax-teal-soft); color: #065a68; }

.na-submit {
  width: 100%; padding: 12px 18px; margin-top: 4px;
  border: 1px solid transparent; border-radius: var(--ax-r-sm);
  background: var(--ax-teal); color: #fff;
  font-size: var(--ax-fs-sm); font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.na-submit:hover { background: var(--ax-teal-hover); }
.na-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }

.na-auth-foot {
  margin: 2px 24px 0; padding: 14px 0 22px;
  border-top: 1px solid var(--ax-line);
  font-size: 12px; color: var(--ax-ink-3); line-height: 1.6;
}
.na-auth-foot a { color: var(--ax-teal); text-decoration: none; font-weight: 600; }
.na-auth-foot a:hover { text-decoration: underline; }

/* 蜜罐字段：真实用户不可见、不可聚焦；自动灌号脚本会无差别填写从而暴露 */
.na-hp {
  position: absolute !important; left: -5000px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* ---------------- 移动端抽屉内的账号区 ---------------- */
.na-auth-drawer { margin-top: 22px; }
.na-auth-drawer .na-auth-drawer__btn { width: 100%; }
.na-auth-drawer__card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--ax-line); border-radius: var(--ax-r);
  background: var(--ax-bg-2);
}
.na-auth-drawer__card .na-avatar { width: 34px; height: 34px; font-size: 15px; }
.na-auth-drawer__who strong { display: block; font-size: var(--ax-fs-sm); color: var(--ax-ink); }
.na-auth-drawer__who span { display: block; font-size: 12px; color: var(--ax-ink-3); }
.na-auth-drawer__row { display: flex; gap: 10px; }
.na-auth-drawer__row .btn { flex: 1; }

/* 窄屏：头部入口让位给抽屉（抽屉里有完整账号区），避免与品牌/语言按钮挤在一行 */
@media (max-width: 860px) {
  .na-auth-wrap { display: none; }
}