/* 智行未来 · 三站共用导航：顶栏（首页 / 监护站 / 后台管理）+ 侧栏。首页、后台、监护站都加载本文件，放在各自样式之后。
   取值见《三端设计规范》第 3–7 节：顶栏 65 吸顶、侧栏项 40、按钮 40 / 圆角 10；颜色只用 tokens.css。 */

/* ---------- 顶栏 ---------- */
/* Safari：backdrop-filter 不能直接放在 sticky 元素上（会破坏吸顶），玻璃改由 ::before 承担 */
.top{position:sticky;top:0;z-index:30;border-bottom:none;padding:0;display:block;min-height:0;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bar);
  -webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar)}
.top.flyout-open::before{background:#FAFAFC;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="dark"] .top.flyout-open::before{background:#161617}
/* 滚动边缘：内容滑入顶栏下方时浮现投影（滚动时间线，不支持的浏览器保持静态发丝线） */
@supports (animation-timeline: scroll()){
  .top{animation:zx-top-edge linear both;animation-timeline:scroll(root);animation-range:0 28px}
  @keyframes zx-top-edge{from{box-shadow:inset 0 0 0 1px var(--glass-border-in),inset 0 1px 0 var(--glass-edge)}
    to{box-shadow:inset 0 0 0 1px var(--glass-border-in),inset 0 1px 0 var(--glass-edge),0 6px 20px rgba(0,0,0,.09)}}}
/* 顶栏全站统一：52px 高、内容 1024px 居中；logo 32px、链接 15px */
.sh{height:52px;display:flex;align-items:center;gap:18px;padding:0 24px;position:relative}
/* 应用页（监护站/后台管理）：iCloud 应用式全宽顶栏，无左右留白，logo 贴最左 */
.sh:not(.narrow){padding:0 16px}
.sh.narrow{width:min(1024px,100% - 48px);margin:0 auto;padding:0}
.sh-brand{display:flex;align-items:center;flex:none;padding:4px;margin-left:-4px}
.sh-brand img{width:32px;height:32px;display:block}

/* 服务入口：绝对定位水平居中（Apple 官网导航排布），纯文字链接，悬停只变色不加框 */
.sh-tabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px}
.sh-tabs a{height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;color:var(--ink2);font-size:15px;font-weight:400;white-space:nowrap;transition:color .15s}
.sh-tabs a svg.ic{width:17px;height:17px}
.sh-tabs a:hover{color:var(--ink)}
.sh-tabs a[aria-current="page"]{color:var(--ink)}

.sh-tools{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.sh-tools .btn{font-size:14px;height:36px;padding:0 14px}
.sh-tools .conn.tag{font-size:12px}
.sh-grid{position:relative}
.sh-grid .sh-icon svg.ic{width:20px;height:20px}
.sh-grid .sh-pop{right:0;top:calc(100% + 8px)}
/* 应用页（监护站/后台管理）：顶栏只留 logo 与右侧工具，不显示中间标签和搜索 */
.top[data-station="web"] .sh-tabs,.top[data-station="admin"] .sh-tabs,
.top[data-station="web"] [data-sh="search"],.top[data-station="admin"] [data-sh="search"]{display:none}

/* 产品子菜单 flyout：照搬 Apple #globalnav 子菜单（开启时顶栏变 #fafafc 实色、内容 1024px 居中、
   条目 12px/600、错峰入场关键帧动画、关闭内容 .12s 反向淡出） */
.sh-submenu{position:absolute;left:0;right:0;top:var(--top-h);z-index:45;background:#FAFAFC;border-bottom:1px solid #D2D2D7}
:root[data-theme="dark"] .sh-submenu{background:#161617;border-bottom-color:#38383A}
.sh-submenu[hidden]{display:none}
.sh-submenu-content{margin:0 auto;max-width:1024px;padding:40px 22px 84px;display:flex;box-sizing:border-box;
  animation:zx-fade-in .12s cubic-bezier(.4,0,.6,1) both}
.sh-submenu.closing .sh-submenu-content{animation:zx-fade-in .12s cubic-bezier(.4,0,.6,1) reverse both}
@keyframes zx-fade-in{0%{opacity:0}to{opacity:1}}
.sh-submenu-group{box-sizing:border-box;max-width:25%;padding-inline-end:44px;padding-bottom:52px;display:flex;flex-direction:column}
.sh-submenu-group a{font-size:12px;line-height:1.33337;font-weight:600;color:var(--ink);text-decoration:none;padding:5px 0;white-space:nowrap}
.sh-submenu-group b{font-size:12px;line-height:1.33337;font-weight:600;color:#6E6E73;padding:5px 0 7px;white-space:nowrap}
:root[data-theme="dark"] .sh-submenu-group b{color:#86868B}
/* 条目入场：基底可见，动画只做增强（Apple fade-and-slide 关键帧，延迟由 JS 内联） */
.sh-submenu-item{animation:zx-search-fade-slide .32s cubic-bezier(.4,0,.6,1) both}
[data-reduce-motion] .sh-submenu-item{animation:none}
[data-reduce-motion] .sh-submenu-content{animation:none}

/* 站点搜索：Apple 官网式——实色面板从顶栏下滑出，页面其余部分模糊变暗，输入框只有下边线 */
.top{--top-h:52px}
/* 站点搜索：照搬 Apple 官网 globalnav 搜索弹层——
   高度过渡 .24s cubic-bezier(.4,0,.6,1)；条目错峰入场 .32s、translateY(-4px)、每条延迟 20ms；
   输入框延迟 .2s 入场；文字 12px、#333336，表头与占位 #6E6E73，悬停底 #F5F5F7 */
.top{--top-h:52px}
.sh-search{position:absolute;left:0;right:0;top:var(--top-h);z-index:45;display:flex;flex-direction:column;align-items:center;gap:18px;padding:28px 24px 36px;
  background:#FAFAFC;border-bottom:1px solid #D2D2D7;height:0;overflow:hidden;opacity:1;
  transition:height .24s cubic-bezier(.4,0,.6,1)}
:root[data-theme="dark"] .sh-search{background:#161617;border-bottom-color:#38383A}
.sh-search[hidden]{display:none}
/* 条目入场：照搬 Apple fade-and-slide 关键帧；基底保持可见，动画只做增强（任何浏览器异常都不影响显示） */
@keyframes zx-search-fade-slide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.sh-search-item{animation:zx-search-fade-slide .32s cubic-bezier(.4,0,.6,1) both}
.sh-search-hint b{animation:zx-search-fade-slide .32s cubic-bezier(.4,0,.6,1) .2s both}
/* 输入框入场：照搬 Apple globalnav-search-input-intro（.24s，延迟 .2s） */
.sh-search-box{animation:zx-search-input-intro .24s cubic-bezier(.4,0,.6,1) .2s both}
@keyframes zx-search-input-intro{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* 面板下方的页面内容：直接模糊+变暗（Apple 做法，无遮罩层，鼠标移出顶栏即退出） */
body:has(.sh-search.open) main,body:has(.sh-search.open) footer{filter:blur(6px) saturate(1.05) brightness(.92)}
:root[data-reduce-transparency] body:has(.sh-search.open) main,:root[data-reduce-transparency] body:has(.sh-search.open) footer{filter:none}
/* 输入框：无下边线（照 Apple 快照要求）；聚焦只加深文字无聚焦框 */
.sh-search-box{width:min(980px,100%);height:44px;display:flex;align-items:center;gap:12px;padding:0 2px;background:transparent;border-radius:0;box-shadow:none;border-bottom:none}
.sh-search-box svg.ic{width:20px;height:20px;color:#6E6E73;flex:none}
:root[data-theme="dark"] .sh-search-box svg.ic{color:#86868B}
.sh-search-box input{flex:1;border:0;background:transparent;font-size:17px;color:#333336;outline:none;min-width:0}
:root[data-theme="dark"] .sh-search-box input{color:#E8E8ED}
.sh-search-box input::placeholder{color:#6E6E73}
:root[data-theme="dark"] .sh-search-box input::placeholder{color:#86868B}
.sh-search-box input:focus-visible{outline:none}
.sh-search-results{width:min(980px,100%);max-height:none;overflow:visible;display:flex;flex-direction:column;position:relative;margin-top:32px;
  scrollbar-width:none}
.sh-search-results::-webkit-scrollbar{display:none}
/* 条目结构与 Apple 一致：外层定入场动画延迟，内层 <a> 为 24px 行、箭头在文字前 */
.sh-search-item{margin:4px -8px 0}
.sh-search-results a{display:flex;align-items:center;gap:8px;min-height:24px;padding:0 8px;color:#333336;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:-.01em}
:root[data-theme="dark"] .sh-search-results a{color:#E8E8ED}
.sh-search-results a:hover{background:#F5F5F7;color:#000}
:root[data-theme="dark"] .sh-search-results a:hover{background:#1D1D1F;color:#FFF}
.sh-search-results a b{font-size:12px;font-weight:600;letter-spacing:-.01em}
.sh-search-results a svg.ic{width:16px;height:16px;color:#6E6E73;flex:none;order:-1}
.sh-search-empty{padding:8px 14px;font-size:12px;color:#6E6E73}
.sh-search-hint b{display:block;font-size:12px;font-weight:400;letter-spacing:-.01em;color:#6E6E73;padding:0 8px;margin:0 0 4px}
:root[data-theme="dark"] .sh-search-hint b{color:#86868B}
/* 清除按钮（Apple：globalnav-searchfield-reset） */
.sh-search-clear{display:none;width:28px;height:28px;border-radius:50%;place-items:center;background:#C7C7CC;color:#FFF;flex:none;font-size:14px;line-height:1}
:root[data-theme="dark"] .sh-search-clear{background:#48484A}
.sh-search-clear.show{display:grid}
.sh-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--ink2);flex:none;transition:color .15s}
.sh-icon:hover{color:var(--ink)}
.sh-icon svg.ic{width:20px;height:20px}
.sh-menu-btn{display:none}

/* 账号按钮与弹出菜单 */
.sh-account{position:relative}
.sh-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:color .15s}
.sh-avatar[aria-expanded="true"]{background:var(--fill)}
.sh-avatar b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#FFF;font-size:13px;font-weight:600}
.sh-avatar svg.ic{width:16px;height:16px;color:var(--ink2)}
.sh-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:6px;border-radius:14px;background:var(--glass-float);
  -webkit-backdrop-filter:var(--blur-sheet);backdrop-filter:var(--blur-sheet);
  box-shadow:var(--glass-shadow-float),inset 0 0 0 1px var(--glass-border-in),inset 0 1px 0 var(--glass-edge);z-index:40}
.sh-pop[hidden]{display:none}
.sh-pop .who{padding:10px 12px 8px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--sep);margin-bottom:4px}
.sh-pop .who span{font-size:13px;color:var(--ink2)}
.sh-pop a,.sh-pop button{width:100%;height:40px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:9px;color:var(--ink);font-size:15px;text-align:left}
.sh-pop a:hover,.sh-pop button:hover{background:var(--fill)}
.sh-pop svg.ic{width:18px;height:18px;color:var(--ink2)}
.sh-pop .danger{color:var(--red-text)}
.sh-pop .danger svg.ic{color:var(--red-text)}

/* 手机菜单（下拉面板）：玻璃面板，只在展开时短暂叠加一层模糊 */
.sh-menu{border-top:1px solid var(--sep);padding:8px 16px 16px;display:flex;flex-direction:column;gap:2px;
  background:var(--glass-float);-webkit-backdrop-filter:var(--blur-sheet);backdrop-filter:var(--blur-sheet);
  box-shadow:0 8px 32px rgba(0,0,0,.12),inset 0 0 0 1px var(--glass-border-in)}
.sh-menu[hidden]{display:none}
.sh-menu a,.sh-menu button{height:48px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:12px;color:var(--ink);font-size:17px;text-align:left;width:100%}
.sh-menu a svg.ic,.sh-menu button svg.ic{color:var(--ink2)}
.sh-menu a[aria-current="page"]{background:var(--blue-soft);color:var(--blue-text)}
.sh-menu a[aria-current="page"] svg.ic{color:var(--blue-text)}
.sh-menu hr{border:0;border-top:1px solid var(--sep);margin:6px 0;width:100%}
.sh-menu .danger{color:var(--red-text)}

/* ---------- 侧栏 ---------- */
.layout{display:flex;align-items:flex-start}
/* 液态玻璃功能层：与顶栏同材质，内容在右侧滚动时侧栏保持固定 */
.side{flex:0 0 232px;position:sticky;top:65px;height:calc(100vh - 65px);overflow-y:auto;padding:20px 12px;display:flex;flex-direction:column;gap:2px;
  background:var(--mat);-webkit-backdrop-filter:var(--blur-mat);backdrop-filter:var(--blur-mat);
  box-shadow:inset -1px 0 0 var(--glass-border-in)}
.side .side-h{font-size:13px;font-weight:600;color:var(--ink2);padding:0 12px 8px}
.side .side-h.sub{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.5px;padding:14px 12px 6px;text-transform:uppercase}
.side a{height:40px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:12px;color:var(--ink);font-size:16px;transition:background .15s}
.side a svg.ic{width:20px;height:20px;color:var(--ink2);flex:none}
.side a:hover{background:var(--fill)}
.side a[aria-current="page"]{background:var(--blue-soft);color:var(--blue-text);font-weight:600}
.side a[aria-current="page"] svg.ic{color:var(--blue-text)}
.side .count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--red);color:#FFF;font-size:13px;font-weight:600;display:grid;place-items:center}
.side .map-menu{flex:none;display:flex;flex-direction:column;gap:2px}
.side .map-menu>a svg.ic:last-child{margin-left:auto;transition:transform .15s}
.side .map-menu.open>a svg.ic:last-child{transform:rotate(90deg)}
.side .map-submenu{margin:0 0 4px 22px;padding-left:10px;border-left:2px solid var(--sep);display:flex;flex-direction:column;gap:2px}
.side .map-submenu a{height:36px;font-size:14px;color:var(--ink2)}
.side .map-submenu a[aria-current="page"]{color:var(--blue-text);background:var(--blue-soft)}
.side .demo{margin-top:auto;padding:12px;border-radius:12px;background:var(--fill);font-size:13px;color:var(--ink2);line-height:1.5}

/* ---------- 手机宽度 ---------- */
@media (max-width:760px){
  .sh{height:56px;gap:8px;padding:0 8px 0 16px}
  .sh.narrow{width:auto;padding:0 8px 0 16px}
  .sh-tabs,.sh-tools .sh-wide{display:none}
  .sh-menu-btn{display:grid}
  /* 侧栏变成吸顶的胶囊标签，横滑，无滚动条 */
  .layout{flex-direction:column;align-items:stretch}
  .side{position:sticky;top:57px;z-index:20;height:auto;flex:none;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;padding:10px 16px;border-right:0;border-bottom:0;box-shadow:inset 0 -1px 0 var(--glass-border-in);background:var(--bar);-webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar);scrollbar-width:none;scroll-snap-type:x proximity}
  .side::-webkit-scrollbar{display:none}
  .side .side-h,.side .demo{display:none}
  .side .map-menu,.side .map-submenu{display:contents}
  .side a,.side .map-submenu a{flex:none;height:36px;padding:0 14px;border-radius:18px;background:var(--fill);font-size:14px;color:var(--ink);scroll-snap-align:start;gap:6px}
  .side a svg.ic{width:16px;height:16px}
  .side a[aria-current="page"],.side .map-submenu a[aria-current="page"]{background:var(--blue);color:#FFF}
  .side a[aria-current="page"] svg.ic{color:#FFF}
  .side .count{min-width:18px;height:18px;font-size:12px;padding:0 5px}
}
/* ---------- 键盘焦点与按压反馈（三站共用） ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn:active{transform:scale(.97)}
.btn{transition:transform .12s}
@media (prefers-reduced-motion:reduce){
  .sh-tabs a,.side a,.side .map-menu>a svg.ic:last-child{transition:none}
  .btn{transition:none}
  .btn:active{transform:none}
}