/* ================= 统一刊头 + 页面过场(2026-10-17;2026-11-02 改成 afcbook.org 的样子) =================
   全站同一条:上面石板蓝一行(白底 logo、站名、搜索框、简繁、我的书房),下面白底一行栏目。手机上只留上面一行,栏目在底部导航。
   换页时刊头不动,正文用 View Transitions 淡入淡出。 */
.top{position:relative;overflow:hidden;isolation:isolate;background:#5B7395;color:#fff;box-shadow:0 1px 3px rgba(38,50,72,.10)}
.top .top-in{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;padding-top:12px;position:relative;max-width:1200px}
.top .brand{display:flex;align-items:center;gap:12px;min-width:0;color:#fff;font-family:"Poppins","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;font-weight:600;white-space:nowrap}
.top .brand:hover{text-decoration:none;color:#fff}
.top .brand .bl{flex:none;display:block;height:38px;width:auto;padding:4px 7px;background:#fff;border-radius:4px;box-sizing:content-box}
.top .brand .bx{display:flex;flex-direction:column;gap:3px;min-width:0}
.top .brand .bn{font-size:18px;letter-spacing:1px;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis}
.top .brand small{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;font-size:10.5px;letter-spacing:.8px;color:#E6ECF3;font-weight:400;line-height:1}
/* 搜索框:白底 + 橙色放大镜,和 afcbook.org 一样 */
.top .topsearch{flex:1 1 240px;max-width:560px;min-width:0;display:flex;height:44px;margin-left:8px;border-radius:4px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(38,50,72,.18)}
.top .topsearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 14px;font:inherit;font-size:15px;color:#1A1F27}
.top .topsearch input::placeholder{color:#6F7683}
.top .topsearch button{flex:none;width:50px;border:0;background:#DB6A26;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.top .topsearch button:hover{background:#C25719}
.top .topsearch svg{width:19px;height:19px}
.top .topr{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.top .who{font-size:14px;color:#EEF2F7;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.top .who b{color:#fff;font-weight:600}
.top .zh-seg{display:inline-flex;border:1px solid rgba(255,255,255,.5);border-radius:4px;overflow:hidden;background:transparent}
.top .zh-seg button{border:0;background:none;height:34px;padding:0 11px;color:#fff;font-size:13.5px;white-space:nowrap;cursor:pointer;font-family:inherit}
.top .zh-seg button + button{border-left:1px solid rgba(255,255,255,.35)}
.top .zh-seg button.active{background:#fff;color:#465C7B;font-weight:600}
.top .mybooks{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:4px;background:#DB6A26;border:1px solid #DB6A26;color:#fff;font-weight:700;font-size:15px;white-space:nowrap;line-height:1;box-shadow:0 1px 3px rgba(38,50,72,.2);transition:background .15s}
.top .mybooks svg{width:18px;height:18px}
.top .mybooks:hover{background:#C25719;border-color:#C25719;text-decoration:none;color:#fff}
.top .mybooks .cnt{background:#fff;color:#C25719;border-radius:10px;padding:0 7px;font-size:12.5px;line-height:19px;min-width:20px;text-align:center;font-weight:700}
.top .tbtn{height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.5);border-radius:4px;background:transparent;color:#fff;font-size:14px;cursor:pointer;font-family:inherit}
.top .tbtn:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
/* 第二行:白底栏目(整条铺满屏宽) */
.top .topnav{order:9;flex:0 0 100%;position:relative;display:flex;align-items:center;gap:28px;height:46px;margin-top:12px}
.top .topnav::before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;background:#fff;z-index:-1}
.top .topnav a{display:inline-flex;align-items:center;gap:6px;height:46px;color:#1A1F27;border-bottom:2px solid transparent;border-top:2px solid transparent;font-size:15.5px;font-weight:500;white-space:nowrap;line-height:1}
.top .topnav a svg{width:17px;height:17px;color:#5B7395}
.top .topnav a:hover{color:#465C7B;text-decoration:none}
.top .topnav a.on{color:#1A1F27;font-weight:600;border-bottom-color:#DB6A26}
/* 支持事工(2026-11-02):栏目行最右,橙色小心,靠右站开一点 */
.top .topnav a.give{margin-left:auto;align-self:center;height:34px;padding:0 14px 0 11px;border:0;border-radius:4px;background:#DB6A26;color:#fff;font-weight:600;box-shadow:0 1px 3px rgba(194,87,25,.3)}
.top .topnav a.give svg{color:#fff;stroke-width:2}
.top .topnav a.give:hover{background:#C25719;color:#fff}
.top .topnav a[hidden]{display:none}
.bottom{display:none}
@media (max-width:1100px){
  .top .who{display:none}
  .top .brand small{display:none}
  .top .top-in{column-gap:14px}
  .top .topnav{gap:20px}
}
@media (max-width:860px){
  .top .top-in{flex-wrap:nowrap;padding-block:9px;column-gap:10px}
  .top .topnav,.top .who,.top .topsearch{display:none}
  .top .brand{gap:8px}
  .top .brand .bl{height:30px;padding:3px 5px}
  .top .brand .bn{font-size:15px;letter-spacing:.5px}
  .top .topr{gap:8px}
  .top .zh-seg button{height:30px;padding:0 9px;font-size:12.5px}
  .top .mybooks{height:36px;padding:0 11px;font-size:13.5px;gap:6px}
  .top .mybooks svg{width:16px;height:16px}
  .top .tbtn{height:36px;padding:0 10px;font-size:13px}
  body:has(nav.bottom){padding-bottom:calc(68px + env(safe-area-inset-bottom))}   /* 只有带手机底栏的页面才留这块;阅读器没有底栏 */
  .bottom{display:flex;position:fixed;left:0;right:0;bottom:0;height:68px;background:#fff;border-top:1px solid #E7E2DE;box-shadow:0 -2px 10px rgba(38,50,72,.08);z-index:50;padding-bottom:env(safe-area-inset-bottom)}
  .bottom a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#6F7683;font-size:11.5px;line-height:1;border-top:2px solid transparent}
  .bottom a svg{width:22px;height:22px}
  .bottom a:hover{text-decoration:none}
  .bottom a.on{color:#465C7B;font-weight:600;border-top-color:#DB6A26}
  .bottom a.give{color:#C25719;font-weight:600}
  .bottom a.give svg{color:#DB6A26;stroke-width:2}
}
@media (max-width:420px){
  .top .top-in{column-gap:8px;padding-inline:12px}
  .top .brand .bl{height:26px}
  .top .brand .bn{font-size:14px;letter-spacing:0}
  .top .brand{flex:none;min-width:0}
  .top .brand .bx{display:none}   /* 窄手机上登录后右边有数字徽章,放不下「线上内容平台」几个字;logo 牌上已写着使者书房 */
  .top .topr{gap:6px}
  .top .zh-seg button{height:28px;padding:0 6px;font-size:12px}
  .top .mybooks{height:34px;padding:0 8px;font-size:12.5px;gap:4px}
  .top .mybooks svg{width:15px;height:15px}
  .top .mybooks .cnt{padding:0 6px;font-size:11.5px;line-height:17px;min-width:17px}
  .top .tbtn{padding:0 8px}
}
/* ---- 换页过场:刊头和底栏「钉住」,正文淡入淡出 ---- */
@view-transition{navigation:auto}
.top{view-transition-name:afc-top}
.bottom{view-transition-name:afc-bottom}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:ease}
::view-transition-old(afc-top),::view-transition-new(afc-top),::view-transition-old(afc-bottom),::view-transition-new(afc-bottom){animation:none}
/* 不支持 View Transitions 的浏览器就直接切页;不另做「正文从透明淡入」—— 那种做法万一动画没跑起来,整页会一直是空白 */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
/* ================= 统一刊头 结束 ================= */