/* ============================================================
   语文桥 · 智能课件 通用 chrome（固定顶栏 / 底栏TAB / 双轨面包屑 /
   字号 A-/A+ / 翻页 / 换边 / 认知迁移左导航视觉）
   ------------------------------------------------------------
   单一来源：改这里，所有挂接的课件即时联动。
   适用：shici120 / xuni / 通用模板（「固定顶栏 + 9 面板」模型）与
   wusheng（「幻灯片型 .stage flex 列」模型）均挂本文件。
   两模型差异（顶栏/底栏/进度定位：fixed vs .stage 子项）由末尾
   「wusheng 适配段」用 .stage 前缀吸收，视觉规则统一来源于此。
   主题 token（:root / body / 内容样式）仍由各课件自带，本文件
   只定义 chrome 组件样式，颜色一律引用各课件的 CSS 变量。
   ============================================================ */

/* ===================== 顶栏（固定） ===================== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:48px;
  display:flex;align-items:center;gap:0;padding:0 16px;
  background:linear-gradient(90deg,#0a0a1a,#161622);color:#d8d0c0;border-bottom:1px solid rgba(255,255,255,.08);}
/* 左上 LOGO */
.topbar-logo{display:flex;align-items:center;gap:8px;margin-right:10px;text-decoration:none;flex:0 0 auto;}
.topbar-logo img{height:28px;width:auto;display:block;opacity:.95;transition:.2s;}
.topbar-logo:hover img{opacity:1;}
.topbar-logo span{font-family:"Noto Sans SC",sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.5px;white-space:nowrap;}

.bc{display:flex;align-items:center;gap:0;flex:1;min-width:0;overflow:hidden;}
.bc a,.bc span{display:inline-flex;align-items:center;gap:1px;font-family:"Noto Sans SC",sans-serif;
  font-size:13px;color:#a09888;text-decoration:none;white-space:nowrap;padding:0 6px;line-height:28px;transition:.15s;flex-shrink:0;}
.bc a:hover{color:#e9e3d6;}
.bc .bc-sep{color:#b8902f;font-size:14px;padding:0 4px;font-weight:600;}
.bc .bc-active{color:#fff;font-weight:600;background:rgba(255,255,255,.12);border-radius:6px;padding:0 10px;margin-left:2px;max-width:42vw;overflow:hidden;text-overflow:ellipsis;}

/* 右上：翻页指示(收紧) + 字号(A-/A+ 无中间数字) + 全屏 */
.topbar-right{flex:0 0 auto;display:flex;align-items:center;gap:6px;margin-left:10px;height:28px;
  padding-left:12px;border-left:1px solid rgba(255,255,255,.08);}
.pager{display:flex;align-items:center;gap:0;font-family:"Noto Sans SC",sans-serif;}
.pg-arrow{background:rgba(184,144,47,.07);border:1px solid rgba(184,144,47,.28);color:#b8902f;
  border-radius:7px;width:26px;height:26px;font-size:15px;line-height:1;cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center;padding:0;}
.pg-arrow:hover{color:#d4a847;background:rgba(184,144,47,.14);border-color:rgba(184,144,47,.45);}
.pg-ind{font-size:12px;color:#cfc6b4;padding:0 2px;min-width:34px;text-align:center;user-select:none;letter-spacing:.3px;}
.fs-ctl{display:flex;align-items:center;gap:0;}
.fs-btn{font-family:"Noto Sans SC",sans-serif;font-size:13px;font-weight:600;color:#cfc6b4;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:7px;height:26px;padding:0 9px;cursor:pointer;transition:.18s;}
.fs-btn:hover{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);}
.fs-btn.fs-plus{border-top-left-radius:0;border-bottom-left-radius:0;}
.fs-btn.fs-minus{border-top-right-radius:0;border-bottom-right-radius:0;}
.fs-divider{width:1px;height:18px;background:rgba(255,255,255,.12);margin:0 0;}
.ui-btn{font-family:"Noto Sans SC",sans-serif;font-size:12px;font-weight:600;color:#cfc6b4;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:4px 10px;cursor:pointer;transition:.18s;white-space:nowrap;}
.ui-btn:hover{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);}

/* ===== 认知迁移 · 左导航视觉（窄栏小字 + 分组 TAB） ===== */
.browse{display:flex;gap:0;align-items:stretch;height:calc(100vh - 102px);}
/* 认知迁移面板：左导航上下左顶边（去面板内边距 + 触底） */
#p-transfer{padding:0;}
.wlist{width:160px;flex:0 0 160px;overflow-y:auto;background:#2b2620!important;color:#cdbfa6!important;
  border-right:1px solid #4a4036!important;padding:10px 8px;display:flex;flex-direction:column;gap:8px;}
.wtabs{display:flex;gap:4px;margin-bottom:6px;}
.wtab{flex:1;font-family:"Noto Sans SC",sans-serif;font-size:12px;font-weight:700;text-align:center;color:#cdbfa6;background:#3a3128;
  border:1px solid transparent;border-radius:6px;padding:6px 0;cursor:pointer;transition:.15s;line-height:1.2;}
.wtab:hover{background:#4a4036;color:#fff;}
.wtab.active{background:var(--gold);color:#2b2620;}
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;align-content:start;}
.wbtn{font-family:inherit;font-size:13px;line-height:1.2;text-align:center;color:#d8ccb4;background:#3a3128;
  border:1px solid transparent;border-left:3px solid transparent;border-radius:6px;padding:7px 0;cursor:pointer;transition:.15s;}
.wbtn:hover{background:#4a4036;color:#fff;}
.wbtn.active{background:#4a3a22;color:#fff;border-left-color:var(--gold);}
.detail{flex:1;overflow:auto;padding:10px 26px 24px;}
/* 换边：左侧通览移到右侧 */
body.swap-right .browse{direction:rtl;}
body.swap-right .browse>*{direction:ltr;}

/* ===================== 底栏（固定） ===================== */
.tabnav{position:fixed;left:0;right:0;bottom:0;z-index:60;height:54px;display:flex;align-items:center;gap:3px;padding:0 10px;
  background:linear-gradient(90deg,#161622,#0a0a1a);border-top:1px solid rgba(255,255,255,.08);overflow-x:auto;justify-content:flex-start;}
.tab-btn{flex:0 0 auto;display:flex;align-items:center;gap:5px;font-family:"Noto Sans SC",sans-serif;font-size:12.5px;color:#b8b0a0;
  background:transparent;border:1px solid transparent;border-radius:8px;padding:7px 11px;cursor:pointer;transition:.2s;white-space:nowrap;}
/* TAB 用空心小圈代替图标：普通空心（暗金描边），仅当前(.active)实心 */
.tab-btn .tab-ic{display:none;}
/* 暗金圈（与语文桥 --gold #b8902f 同色）；未点击半透明克制，空心内透黑底 */
.tab-btn::before{content:'';width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(184,144,47,.55);box-sizing:border-box;flex:0 0 auto;transition:.2s;}
.tab-btn .tab-ph{font-weight:600;}
.tab-btn:hover{color:#e6e6e6;background:rgba(255,255,255,.08);}
.tab-btn.active::before{background:rgba(184,144,47,.85);border-color:rgba(184,144,47,.85);}
.tab-btn.active{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);box-shadow:0 0 14px rgba(255,255,255,.08);}
/* 学情诊断（✚汇总）TAB：未选中时与普通TAB完全一致，仅 .active 态用黑色系区分；禁止常驻 box-shadow/background */
.tab-swap{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-family:"Noto Sans SC",sans-serif;font-size:12px;color:#998e7a;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 11px;transition:.2s;margin-left:6px;}
.tab-swap:hover{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);}
.tab-brand{margin-left:auto;display:flex;align-items:center;font-family:"Noto Sans SC",sans-serif;font-size:11px;font-weight:500;color:rgba(184,144,47,.5);letter-spacing:.4px;text-decoration:none;padding:0 14px;border-left:1px solid rgba(184,144,47,.25);white-space:nowrap;user-select:none;transition:.2s;}
.tab-brand:hover{color:rgba(184,144,47,.85);}
body.swap-right .tab-brand{order:-1;margin-left:0;margin-right:auto;border-left:none;border-right:1px solid rgba(255,255,255,.1);}
.progress{position:fixed;left:0;right:0;bottom:54px;z-index:61;height:3px;background:rgba(255,255,255,.12);}
.progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a909c,#c8cdd6);transition:width .45s ease;}
/* 内页可滚动但隐藏滚动条 */
.main,.wlist,.detail,.browse,.panel{scrollbar-width:none;-ms-overflow-style:none;}
.main::-webkit-scrollbar,.wlist::-webkit-scrollbar,.detail::-webkit-scrollbar,.browse::-webkit-scrollbar,.panel::-webkit-scrollbar{display:none;width:0;height:0;}

/* ===== 面包屑双轨自动切换（克制，每30秒淡入淡出） ===== */
.bc{position:relative;}
.bc-layers{position:relative;flex:1;min-width:0;height:28px;overflow:hidden;}
.bc-layer{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;opacity:0;transition:opacity 1.3s ease;pointer-events:none;}
.bc-layer.on{opacity:1;}
.bc-layer a,.bc-layer span{display:inline-flex;align-items:center;gap:1px;font-family:"Noto Sans SC",sans-serif;font-size:13px;color:#a09888;text-decoration:none;padding:0 6px;line-height:28px;}
.bc-layer a:hover{color:#e9e3d6;}
.bc-layer .bc-sep{color:#b8902f;font-size:14px;padding:0 4px;font-weight:600;}
.bc-layer .bc-active{color:#fff;font-weight:600;background:rgba(255,255,255,.12);border-radius:6px;padding:0 10px;}
.bc-toggle{margin:0 10px;display:flex;flex-direction:row;align-items:center;gap:5px;flex:0 0 auto;user-select:none;}
.bc-dot{width:6px;height:6px;border-radius:50%;background:#4a4036;transition:background .4s;}
.bc-dot.on{background:rgba(255,255,255,.7);}

@media(max-width:820px){
  .browse{flex-direction:column;height:auto;}
  .wlist{width:100%!important;flex:none;max-height:200px;}
}

/* ===== wusheng 幻灯片型适配：顶栏/底栏/进度回归 .stage flex 子项 =====
   本文件默认给三包写 position:fixed（顶栏/底栏/进度浮层）。
   wusheng 是 .stage flex 列（顶栏/进度/底栏为 column 子项），
   用 .stage 前缀把这些组件的定位拉回 flex 子项，视觉仍由上方统一规则驱动。 */
.stage .topbar{position:relative;flex:0 0 48px;top:auto;left:auto;right:auto;bottom:auto;}
.stage .tabnav{position:relative;flex:0 0 54px;left:auto;right:auto;bottom:auto;}
.stage .progress{position:relative;flex:0 0 3px;left:auto;right:auto;bottom:auto;}