/* ============================================================
   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}
}