/* ===== JARVIS 品牌标识 · 站点接入样式 =====
   页头图形标：brand/jarvis-mark.svg（静态版，去 SMIL 动画）
   主标（深色底）：brand/jarvis-logo-dark.svg   主标（浅色底）：brand/jarvis-logo-light.svg
   favicon / PWA 图标：根目录 favicon.* / icon-192.png / icon-512.png
================================================ */
.brand-logo{
  height:36px;
  width:36px;
  flex:0 0 auto;
  align-self:center;      /* 覆盖 .brand 的 baseline 对齐，避免图标下沉 */
  display:block;
  filter:drop-shadow(0 1px 3px rgba(20,1,4,.38));
}
/* 需要更大标识的场景（如落地页首屏） */
.brand-logo-lg{height:56px;width:56px}

@media (max-width:768px){
  .brand-logo{height:32px;width:32px}
  .brand-logo-lg{height:46px;width:46px}
}
@media (max-width:400px){
  .brand-logo{height:28px;width:28px}
}
@media (prefers-reduced-motion:reduce){
  .brand-logo{filter:none}
}

/* ============================================================
   移动端页头统一 · Mobile Header（2026-09-11）
   ------------------------------------------------------------
   背景：导航页 ≤860px 时左上角是一个「空方块」——菜单按钮
        （.nav-toggle / .pg-*-nav-toggle）里的 <i> 从未被赋样式，
        汉堡图标不可见，看起来像装饰性占位框；品牌 logo 又散落在
        文字左侧，整体像「空框 + 小球 + 字」。
   处理：① 补上汉堡三横线，恢复「图标＝可点菜单」语义；
        ② 左侧胶囊与 logo 合二为一（胶囊内 logo 居左 + 三横线居右），点任意处弹抽屉；
        ③ 顺序固定为「左菜单胶囊 / 右操作」，抽屉自左上角展开。
   作用域：仅 ≤860px。桌面端、页内布局、邮件模板零影响。
   ============================================================ */
@media (max-width:860px){
  /* ---- ① 汉堡图标：三横线 ---- */
  .nav-toggle i,
  .pg-index-nav-toggle i,
  .pg-landing-nav-toggle i,
  .pg-monitor-nav-toggle i{
    display:block !important;position:relative !important;
    width:17px !important;height:2px !important;
    border-radius:2px !important;background:currentColor !important;
  }
  .nav-toggle i::before,.nav-toggle i::after,
  .pg-index-nav-toggle i::before,.pg-index-nav-toggle i::after,
  .pg-landing-nav-toggle i::before,.pg-landing-nav-toggle i::after,
  .pg-monitor-nav-toggle i::before,.pg-monitor-nav-toggle i::after{
    content:"" !important;position:absolute !important;left:0 !important;
    width:17px !important;height:2px !important;
    border-radius:2px !important;background:currentColor !important;
  }
  .nav-toggle i::before,.pg-index-nav-toggle i::before,
  .pg-landing-nav-toggle i::before,.pg-monitor-nav-toggle i::before{top:-6px !important}
  .nav-toggle i::after,.pg-index-nav-toggle i::after,
  .pg-landing-nav-toggle i::after,.pg-monitor-nav-toggle i::after{top:6px !important}

  /* ---- ② 合并胶囊：左侧胶囊 = logo（左）+ 汉堡三横线（右），点任意处弹菜单 ---- */
  .nav-toggle,.pg-index-nav-toggle,
  .pg-landing-nav-toggle,.pg-monitor-nav-toggle{
    order:1 !important;margin:0 !important;
    width:auto !important;height:40px !important;flex:0 0 auto !important;
    padding:0 11px 0 7px !important;
    display:flex !important;align-items:center !important;gap:9px !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:14px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 8px rgba(20,1,4,.30) !important;
    cursor:pointer !important;-webkit-tap-highlight-color:transparent !important;
    animation:navPulse 1.2s ease-out 2 !important;
  }
  /* logo 磁贴（胶囊内左侧） */
  .nav-toggle::before,.pg-index-nav-toggle::before,
  .pg-landing-nav-toggle::before,.pg-monitor-nav-toggle::before{
    content:"" !important;flex:0 0 auto !important;
    width:26px !important;height:26px !important;border-radius:8px !important;
    background-color:rgba(255,255,255,.12) !important;
    background-image:url(brand/jarvis-mark.svg) !important;
    background-repeat:no-repeat !important;background-position:center !important;
    background-size:20px 20px !important;
  }
  /* 汉堡三横线（胶囊内右侧），与 logo 之间留白即分隔，不弱化菜单提示 */
  .nav-toggle i,.pg-index-nav-toggle i,
  .pg-landing-nav-toggle i,.pg-monitor-nav-toggle i{
    margin:0 !important;background:currentColor !important;
  }
  @keyframes navPulse{
    0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 8px rgba(20,1,4,.30)}
    50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 4px rgba(233,210,154,.38)}
  }
  @media (prefers-reduced-motion:reduce){
    .nav-toggle,.pg-index-nav-toggle,
    .pg-landing-nav-toggle,.pg-monitor-nav-toggle{animation:none !important}
  }

  /* ---- ③ 品牌文字移动端隐藏（logo 已并入左侧胶囊，避免重复占位）---- */
  .brand,.pg-index-brand,.pg-landing-brand,.pg-monitor-brand{
    display:none !important;
  }
  /* 登录/注册/找回密码等卡片内的品牌标题例外 */
  .box-hdr .brand{display:block !important}
  .box-hdr .brand span{display:inline !important}
  /* 连接状态移到左侧胶囊右侧（仅作 status 指示），不挤占右侧操作区 */
  .conn{order:2 !important;margin-left:10px !important;gap:7px !important}
  .conn .pill{display:none !important}
  .conn #connTxt{display:none !important}
  /* 右侧操作区：推到最右、加大间距、与左侧胶囊分隔防误触。
     （「退出」已全局移出页头，见本文件下方 logout 规则） */
  .hright,.pg-index-hright,.pg-landing-hright,.pg-monitor-hright{
    order:3 !important;margin-left:auto !important;gap:16px !important;flex:0 0 auto !important;
  }
  /* 会员金色胶囊移动端移除（抽屉 nav 内已有「会员」入口），避免页头抢位 */
  .nav-cta{display:none !important}
  /* 「账号」身份指示移动端隐藏：各页在手机上本就把用户名（#me）藏了，
     只剩一个不可点的头像图标（index.html 的人头 SVG）——看着像「我的账户」入口，
     实际没有任何跳转，属死控件。身份 / 退出统一由会员中心承接：
     左侧胶囊 →「会员」→ pricing.html 正文的账户卡。 */
  .hright > span,
  .pg-index-hright > span,
  .pg-landing-hright > span,
  .pg-monitor-hright > span{display:none !important}
  /* 铃铛（消息）：必须排在「账号 / 退出」右侧。
     注意 pwa.js 把 .pwa-group 插在 nav-wrap 之前，DOM 顺序早于 .hright；
     若两者 order 相同，flex 会按 DOM 顺序把它排到左边（＝夹在左侧胶囊旁）。
     所以这里给 4，明确落到最右；margin-left 再和「退出」拉开距离防误触。 */
  .pwa-group{
    order:4 !important;margin-left:12px !important;flex:0 0 auto !important;
  }

  /* ---- ④ 抽屉自左上角展开（菜单按钮在左）---- */
  .nav-wrap,.pg-index-nav-wrap,
  .pg-landing-nav-wrap,.pg-monitor-nav-wrap{transform-origin:top left !important}
}

/* ============================================================
   页头「退出」全局移出（所有宽度，含桌面）
   「退出」是低频动作，不该长期占页头；统一收进会员中心的账户卡
   （pricing.html 正文 →「我的账户」→ 退出登录）。
   注意：DOM 里的 #logout 元素**保留**，各页脚本仍绑它的 click，这里只隐藏。
   ============================================================ */
.hright #logout,
.pg-index-hright #logout,
.pg-landing-hright #logout,
.pg-monitor-hright #logout{display:none !important}

/* 窄屏防挤压：≤420px 收拉丁副标（避免「茄维斯 · Jarvis」被截成「茄维斯 J」）；
   ≤400px 再缩字号与磁贴 */
@media (max-width:420px){
  .brand span,.pg-index-brand span,
  .pg-landing-brand span,.pg-monitor-brand span{display:none !important}
}
@media (max-width:400px){
  .brand,.pg-index-brand,.pg-landing-brand,.pg-monitor-brand{font-size:14px !important;gap:7px !important}
  header{gap:8px !important}
  header .brand-logo{
    width:34px !important;height:34px !important;flex:0 0 34px !important;padding:4px !important;
  }
}
@media (max-width:360px){
  .pwa-install{display:none !important}
}

/* ============================================================
   PWA 控件（通知铃铛 / 安装到桌面）
   由 pwa.js 注入到页头；脚本未加载时无任何视觉影响。
   红色角标 = 未读事件数（同时同步到系统级 App 图标角标）。
   ============================================================ */
.pwa-group{
  display:flex;align-items:center;gap:6px;order:2;flex:0 0 auto;
}
/* 无 <header> 页面：铃铛固定悬浮右上角（wine 胶囊，深浅页都可见） */
.pwa-group.pwa-floating{
  position:fixed;top:12px;right:12px;z-index:2147483000;
  background:rgba(94,11,20,.92);border:1px solid rgba(233,210,154,.4);
  border-radius:12px;padding:5px 7px;box-shadow:0 6px 18px rgba(0,0,0,.35);order:initial;
}
@media (max-width:400px){
  .pwa-group.pwa-floating{top:8px;right:8px;padding:4px 5px}
}
.pwa-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:34px;min-width:34px;padding:0 9px;
  border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(233,210,154,.28);
  color:#e9d29a;font:inherit;font-size:12px;line-height:1;
  transition:background .18s ease-out,border-color .18s ease-out,color .18s ease-out;
}
.pwa-btn:hover{background:rgba(233,210,154,.16);border-color:rgba(233,210,154,.45)}
.pwa-btn:focus-visible{outline:2px solid #e9d29a;outline-offset:2px}
.pwa-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* 未读角标：右上角红点 */
.pwa-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;
  border-radius:999px;background:#d92d20;color:#fff;
  font:700 10px/16px system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:center;letter-spacing:0;
  box-shadow:0 0 0 2px rgba(94,11,20,.92),0 1px 3px rgba(0,0,0,.4);
  pointer-events:none;
}
.pwa-badge[hidden]{display:none}
/* 新事件到达：铃铛轻晃一次（reduced-motion 下关闭） */
.pwa-bell.ring svg{animation:pwaRing .7s ease-out 2}
@keyframes pwaRing{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(13deg)}
  45%{transform:rotate(-11deg)}
  70%{transform:rotate(6deg)}
}

.pwa-install{background:rgba(201,162,75,.18);border-color:rgba(201,162,75,.5);color:#fff3c8}
.pwa-install[hidden]{display:none}
@media (max-width:620px){
  .pwa-btn .pwa-txt{display:none}
  .pwa-btn{padding:0;min-width:34px;width:34px}
}
@media (prefers-reduced-motion:reduce){
  .pwa-btn{transition:none}
  .pwa-bell.ring svg{animation:none}
}

/* 全站会员 CTA 按钮（导航入口） */
.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:999px;
  background:linear-gradient(180deg,#e9d29a,#c9a24b);
  color:#5e0b14;font-size:13px;font-weight:600;text-decoration:none;
  border:1px solid #c9a24b;white-space:nowrap;
}
.nav-cta:hover{background:linear-gradient(180deg,#f0deb0,#d4b066);color:#5e0b14}
@media (max-width:860px){
  .nav-cta{padding:5px 10px;font-size:12px}
}

/* 会员 CTA 消闪（2026-10-14）：页头金胶囊默认 visibility:hidden（占位不塌版），
   由 pwa.js adaptMemberCta 确认登录态、写定文案后再给 body 加 .jv-nav-ready 显露，
   杜绝「先闪成为创始会员 → 再跳已开通」。移动端 .nav-cta 本就 display:none，不受影响 */
header .nav-cta{visibility:hidden}
body.jv-nav-ready header .nav-cta{visibility:visible}
/* 会员态徽标（pwa.js 已去 href）不再是链接：屏蔽 hover 提亮，避免误导可点 */
header .nav-cta:not([href]):hover{background:linear-gradient(180deg,#e9d29a,#c9a24b);color:#5e0b14}