.hh-topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1180px)/2 + 22px));background:#fff;border-bottom:1px solid #e7ecf3;position:sticky;top:0;z-index:70}.hh-brand{display:flex;align-items:center;gap:12px;color:#1b2738;text-decoration:none;flex:0 0 auto}.hh-logo{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);font-size:13px;font-weight:900;box-shadow:0 5px 12px #2563eb40}.hh-brand strong{display:block;font-size:17px;line-height:1.2}.hh-brand small{display:block;margin-top:2px;color:#98a4b7;font-size:9px;letter-spacing:.13em}.hh-nav{display:flex;align-items:center;gap:24px;color:#71809a;font-size:13px}.hh-nav a{padding:8px 2px;border-bottom:2px solid transparent;color:inherit;text-decoration:none}.hh-nav a:hover,.hh-nav a.active{color:#2563eb;border-bottom-color:#2563eb}.hh-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.hh-actions button,.hh-actions a{font:inherit;cursor:pointer}.hh-login{border:0;border-radius:8px;padding:10px 16px;color:#fff;background:#2563eb;font-size:12px;font-weight:800}.hh-profile,.hh-admin{border:1px solid #d8e3f4;border-radius:8px;padding:9px 13px;color:#2563eb;background:#fff;font-size:12px;font-weight:800;text-decoration:none}.hh-logout{border:1px solid #f1d4d1;border-radius:8px;padding:9px 13px;color:#c2413a;background:#fff;font-size:12px;font-weight:800}.hh-mobile-toggle{display:none}@media(max-width:760px){.hh-topbar{height:60px;padding:0 13px}.hh-brand strong{font-size:14px}.hh-brand small,.hh-nav{display:none}.hh-actions{gap:6px}.hh-actions .hh-admin,.hh-actions .hh-logout{display:none}.hh-profile,.hh-login{padding:9px 11px;font-size:11px}}
.hh-actions{gap:6px}.hh-login{padding:8px 12px;border-radius:7px;font-size:11px}.hh-profile,.hh-admin,.hh-logout{padding:7px 10px;border-radius:7px;font-size:11px}
/* Keep all authenticated actions visually consistent with the compact profile button. */
.hh-actions .hh-admin,.hh-actions .hh-profile,.hh-actions .hh-logout{border:1px solid #d8e3f4;border-radius:7px;padding:7px 10px;color:#2563eb;background:#fff;font-size:11px;font-weight:800;text-decoration:none}
.hh-actions .hh-logout{border-color:#f1c8c5;color:#c2413a}
.hh-actions .hh-admin,.hh-actions .hh-profile,.hh-actions .hh-logout{padding:8px 13px;font-size:12px;min-height:34px}
/* Unified login button across home, courseware, membership and contact pages. */
.hh-actions .hh-login{box-sizing:border-box!important;min-height:34px!important;padding:8px 13px!important;border:0!important;border-radius:7px!important;font-size:12px!important;font-weight:800!important}
/* Center the primary navigation independently from async right-side actions. */
.hh-topbar{position:sticky;isolation:isolate}.hh-nav{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
@media(max-width:760px){.hh-nav{display:none}}
/* Reserve the action area so async login-state updates never move the nav. */
.hh-actions{min-width:220px;justify-content:flex-end}
@media(max-width:760px){.hh-actions{min-width:0}}
@keyframes hh-page-in{from{opacity:.0;transform:translateY(3px)}to{opacity:1;transform:none}}@keyframes hh-page-out{from{opacity:1}to{opacity:.72}}body.hh-page-ready{animation:hh-page-in .22s ease-out both}body.hh-page-leaving{animation:hh-page-out .14s ease-in both}@media(prefers-reduced-motion:reduce){body.hh-page-ready,body.hh-page-leaving{animation:none}}
/* Native cross-document View Transitions for supported browsers. */
@view-transition{navigation:auto}.hh-topbar{view-transition-name:site-header}::view-transition-old(site-header),::view-transition-new(site-header){animation-duration:.24s;animation-timing-function:ease-out}::view-transition-old(root){animation:hh-vt-out .18s ease both}::view-transition-new(root){animation:hh-vt-in .24s ease both}@keyframes hh-vt-out{to{opacity:0;transform:translateY(-3px)}}@keyframes hh-vt-in{from{opacity:0;transform:translateY(4px)}}@supports (view-transition-name:root){body.hh-page-ready,body.hh-page-leaving{animation:none!important}}
/* ⚠️ 2026-09-21：上面这批 `::view-transition-*` 动画原先**没有被 prefers-reduced-motion 覆盖** ——
   第 15 行那条媒体查询只管了 body.hh-page-ready / body.hh-page-leaving（旧式整页淡入淡出），
   而开启「减弱动态效果」的用户切页时，走的正是 View Transitions 这条路，于是仍会看到
   root / site-header 的位移与交叉淡入。这里显式关掉。
   · `animation:none` 是简写，会把 animation-name 置 none、duration 归 0 —— 一次性覆盖
     `::view-transition-old/new(site-header)` 那条只写 `animation-duration` 的长手写法。
   · 带 `!important`：上面那些规则都没有 `!important`，所以无条件胜出，与源码顺序无关。
   · 同时关掉 `::view-transition-group(...)`（它负责尺寸/位置的补间），否则元素仍会滑动。 */
@media(prefers-reduced-motion:reduce){::view-transition-group(root),::view-transition-group(site-header),::view-transition-old(root),::view-transition-new(root),::view-transition-old(site-header),::view-transition-new(site-header){animation:none!important}}