/* ============================================================
   三系统统一导航条（sysbar）：学习中心 / 决策辅助 / 图文控制台 共用
   —— 顶栏（sticky 玻璃：出口 + 账户）+ 底栏（fixed 玻璃：三系统互跳）

   为什么自持令牌：这三处各有自己的主题层（教学站只引 tokens+glass、
   tw 只引自己的 admin.css、周易用皮肤变量），用 var(--accent) 会被各自
   覆盖成不同颜色，统一就无从谈起 → 这里用 --sb-* 取 DC 设计系统的字面值。

   2026-09-30 值对齐 DC：顶底 bar 的大小/位置/玻璃配方逐项抄 DC 的
   .header/.tab-bar（components-08205.css）——用户定「样式与 DC 统一、
   功能保持 sysbar 自己的（出口 + 账户 + 三系统互跳）」。抄值不抄类名，
   令牌仍自持（各站主题栈拿不到 DC 组件样式）。

   用法：<link rel="stylesheet" href="/css/sysbar.css?v=2"> +
        <script src="/js/sysbar.js?v=3"></script>（脚本自己插 DOM，无需占位）
   ============================================================ */
:root{
  --sb-accent:#0a84ff;
  --sb-text:#1c1c1e;
  --sb-text-light:#4e4e56;
  --sb-text-muted:#7a7a82;
  --sb-border:rgba(0,0,0,.1);        /* 与 DC .header 下边框同值 */
  --sb-nav-h:56px;                   /* 底栏高度（页面底部留白 calc(var(--sb-nav-h, 0px) + …)）；JS 挂载后按实测覆盖 */
  --sb-top-h:56px;                   /* 顶栏高度：JS 挂载后按实际值覆盖，页面 min-height 要减掉它 */
  --sb-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Segoe UI',Roboto,'Noto Sans SC',sans-serif;
}

/* ── 顶栏：出口 + 账户（sticky 在文档流里，不需要页面补上边距）──
   规格抄 DC .header：padding 12px 16px、玻璃 0.22→0.05 + blur(16px)
   saturate(180%) brightness(110%)、内顶高光 rgba(255,255,255,.65)、下边框 */
.sb-top{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  font-family:var(--sb-font); font-size:13px; line-height:1.2;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(16px) saturate(180%) brightness(110%);
  backdrop-filter:blur(16px) saturate(180%) brightness(110%);
  border-bottom:1px solid rgba(0,0,0,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.sb-top a{ text-decoration:none; -webkit-tap-highlight-color:transparent; }
/* 出口钮：DC 胶囊钮规格（同 .header-refresh：padding 6px 12px、全圆角、玻璃底） */
.sb-back{ color:var(--sb-accent); font-weight:500;
  padding:6px 12px; border-radius:9999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 20px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.35); }
.sb-right{ margin-left:auto; display:flex; align-items:center; gap:12px; min-width:0; }
.sb-who{ color:var(--sb-text-light);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-out{ color:var(--sb-text-light); }
.sb-login{ color:var(--sb-accent); font-weight:600; }

/* ── 底栏：三系统互跳（当前项高亮）──
   规格抄 DC .tab-bar：tint 0.04 全透下限玻璃 + blur(20px) saturate(1.8)
   + isolation:isolate（iOS 26 液态玻璃 CSS 近似）；高度由 .tab-item 内容
   撑开（≈56px，与 DC 同），页面留白靠 JS 实测写入的 --sb-nav-h */
.sb-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom,0);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  backdrop-filter:blur(20px) saturate(1.8);
  isolation:isolate;
  border-top:1px solid rgba(255,255,255,.1);
}
.sb-tab{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8px 0; gap:2px;
  /* line-height 1.5 与 DC .tab-item 同源——emoji 图标行框 33px + 文字 19.5px，
     总高 73px 与 DC 底栏逐像素一致（normal 行框会矮 9px，实测抓过） */
  font-family:var(--sb-font); font-size:13px; line-height:1.5; color:var(--sb-text-muted);
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  overflow:hidden; white-space:nowrap;
}
/* 图标行框别压 line-height——emoji 自然行框 ≈29px，压了底栏会比 DC 矮 13px（实测 61 vs 74） */
.sb-tab i{ display:block; font-style:normal; font-size:22px; margin-bottom:2px; }
.sb-tab.on{ color:var(--sb-accent); font-weight:600; }
.sb-tab:active{ opacity:.6; }