/* ============================================================
   TokModel 全站统一导航登录态组件
   未登录：黑色「登录」按钮（悬停变紫）
   已登录：头像 + 下拉菜单（个人资料 / 控制台 / 账户设置 / 退出）

   2026-09-22 维护性修正：
   1) 兜底值全部更新 —— 原文件保留的是上一版暖灰调色板
      (#0E0D0B / #E5E4E0 / #D8D6D0 / #57534C / #9C978E / #F6F6F5)，
      其中 #9C978E 作正文色仅 2.90:1。现与 tokens.css 对齐为冷灰。
   2) 两处 <12px 字号并入 --fs-xs（12px 下限）。
   依赖：tokens.css 需在本文件之前加载。
   ============================================================ */

/* ---- 登录按钮：默认黑底白字，悬停变紫 ---- */
.btn-login{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 24px;border-radius:var(--r-pill,999px);text-decoration:none;white-space:nowrap;
  background:var(--ink,#0C0E14);color:#fff;
  font-family:var(--font,"Archivo",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif);
  font-size:var(--fs-md,14px);font-weight:700;letter-spacing:.01em;
  transition:background .22s,transform .22s,box-shadow .22s;
}
.btn-login:hover{
  background:var(--brand,#6C3BFA);transform:translateY(-2px);
  box-shadow:0 14px 32px -10px rgba(108,59,250,.55);
}
.btn-login:active{transform:scale(.97)}

/* ---- 已登录：头像触发器 ---- */
.na-menu{position:relative}
.na-trigger{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:var(--surface,#FFFFFF);border:1px solid var(--line,#E3E5EA);border-radius:var(--r-pill,999px);
  padding:5px 14px 5px 5px;
  font-family:var(--font,"Archivo",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif);
  transition:border-color .2s,box-shadow .2s;
}
.na-trigger:hover{border-color:var(--line-dark,#D3D6DD)}
.na-menu.open .na-trigger{border-color:rgba(108,59,250,.35);box-shadow:0 0 0 3px rgba(108,59,250,.1)}
.na-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand,#6C3BFA),var(--brand-2,#9B72FF));
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:var(--fs-xs,12px);
}
.na-name{
  font-size:var(--fs-sm,13px);font-weight:700;color:var(--ink,#0C0E14);
  max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.na-trigger>svg{width:12px;height:12px;stroke:var(--ink-3,#68707C);fill:none;stroke-width:2;transition:transform .2s}
.na-menu.open .na-trigger>svg{transform:rotate(180deg)}

/* ---- 下拉菜单 ---- */
.na-drop{
  position:absolute;right:0;top:calc(100% + 10px);width:230px;z-index:120;
  background:var(--surface,#FFFFFF);border:1px solid var(--line,#E3E5EA);border-radius:var(--r-lg,12px);
  box-shadow:0 20px 50px -18px rgba(12,14,20,.25);overflow:hidden;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);
}
.na-menu.open .na-drop{opacity:1;transform:none;pointer-events:auto}
.na-head{padding:16px 18px;border-bottom:1px solid var(--line,#E3E5EA)}
.na-head b{display:block;font-size:var(--fs-md,14px);font-weight:800;color:var(--ink,#0C0E14)}
.na-head span{
  font-family:var(--mono,"JetBrains Mono",monospace);font-size:var(--fs-xs,12px);
  color:var(--ink-3,#68707C);display:block;margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.na-item{
  display:flex;align-items:center;gap:10px;width:100%;text-decoration:none;box-sizing:border-box;
  padding:12px 18px;border:none;background:none;cursor:pointer;text-align:left;
  font-family:var(--font,"Archivo",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif);
  font-size:var(--fs-md,14px);font-weight:600;color:var(--ink-2,#4C5058);
  transition:background .15s,color .15s;
}
.na-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.na-item:hover{background:var(--bg,#F4F5F7);color:var(--ink,#0C0E14)}
.na-item.na-danger{color:var(--danger,#CE2020)}
.na-item.na-danger:hover{background:rgba(206,32,32,.06);color:var(--danger,#CE2020)}

/* ---- 窄屏：隐藏用户名，只留头像 ---- */
@media(max-width:640px){
  .na-name{display:none}
  .na-trigger{padding:5px}
  .na-drop{right:-6px}
}

/* ============================================================
   r71 · 导航挂载点占位（消除跨页时 nav 被挤动一下）
   - 未登录：先占 76px（实测「登录」按钮宽度），挂载点从 0 → 76px 不再挤动别的元素
   - 已登录：<head> 内联脚本给 <html> 加 .tm-has-session，放宽到 168px
     （实测头像态 117~165px，用户名上限 96px）
   - 窄屏：只留头像/按钮，不做预留
   ============================================================ */
[data-nav-auth]{
  display:flex;justify-content:flex-end;
  min-width:76px;
}
html.tm-has-session [data-nav-auth]{min-width:168px}
@media(max-width:640px){
  [data-nav-auth]{min-width:0}
  html.tm-has-session [data-nav-auth]{min-width:0}
}

/* ============================================================
   r86 · 平板宽度导航项单行保护
   641–1024px 时 logo + 4 个导航项 + 语言切换 + 登录态同处一行，
   .nav-links 作为 flex 子项默认可收缩，中文标签会被压成竖排（首/页）。
   这里禁止收缩与换行，并在该区间收紧间距，仍保持现有视觉层级。
   ============================================================ */
.nav-links{flex:0 0 auto}
.nav-links>li{white-space:nowrap}
.nav-links a{white-space:nowrap}
@media(min-width:641px) and (max-width:1024px){
  /* 越南语导航标签最长（Mô hình / Bảng giá / Tài liệu / Bảng điều khiển），
     768px 下固定 22px 间距会顶出横向滚动，改为随宽度线性收紧。 */
  .nav-links{gap:clamp(12px,2.2vw,22px)}
  .nav-inner{padding:0 22px}
}