﻿/* ============================================================
   顶栏 · R35 精简重制（覆盖 ref.css 的蜂鸟顶栏样式）
   ============================================================ */
.window-chrome{
  height:66px!important;
  min-height:66px!important;
  padding:0 20px!important;
  gap:16px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%)!important;
  border-bottom:1px solid #e8eef7;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 26px -24px rgba(14,34,74,.55)!important;
}

.window-chrome-left{display:flex;align-items:center;gap:14px;min-width:0}
.window-chrome-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* 品牌 */
.window-brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:38px;height:38px;border-radius:12px;overflow:hidden;display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(43,107,255,.15),0 8px 18px rgba(20,60,160,.20),0 0 0 4px rgba(43,107,255,.04)}
.brand-mark__img{width:100%;height:100%;border-radius:inherit}
.window-brand-block{display:flex;flex-direction:column;gap:3px;min-width:0}
.window-brand-name{display:block;font-size:20px;line-height:1;font-weight:600;letter-spacing:.01em;color:#0e1727;white-space:nowrap}
.window-brand-block small{font-style:normal;font-size:8.5px;line-height:1;letter-spacing:.28em;font-weight:700;color:#9aa8bf;white-space:nowrap}

/* 通用胶囊 */
.tb-chip{height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border-radius:10px;
  border:1px solid #e6ecf7;background:#f8faff;color:#46536b;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s}
.tb-chip svg{width:14px;height:14px;color:#7c8da7;flex:0 0 auto;transition:color .16s}
.tb-chip:hover{background:#f1f6ff;border-color:#d3e2fb;color:#1f4fd8;box-shadow:0 6px 16px -12px rgba(43,107,255,.55)}
.tb-chip:hover svg{color:#2b6bff}
.tb-chip:focus-visible{outline:2px solid rgba(43,107,255,.35);outline-offset:2px}
.tb-label{white-space:nowrap}

/* 延迟 */
.tb-lat{cursor:default;color:#2b6bff;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tb-lat::before{content:"";width:6px;height:6px;border-radius:50%;background:#c3cede;box-shadow:0 0 0 3px rgba(195,206,222,.16);transition:.2s}
.tb-lat.is-live::before{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16)}
.tb-lat.is-warn{color:#d97706}
.tb-lat.is-warn::before{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.tb-lat:hover{background:#f8faff;border-color:#e6ecf7;color:#2b6bff;box-shadow:none}

/* 在线 */
.tb-online{color:#177a52;background:#f4fdf8;border-color:#d7f0e3}
.tb-online:hover{color:#0f7a4f;background:#ecfbf3;border-color:#bfe9d4;box-shadow:0 6px 16px -12px rgba(16,160,100,.55)}
.tb-online b{font-size:13px;font-weight:800;color:#0f9d63;font-variant-numeric:tabular-nums}
.tb-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16);animation:tbPulse 2.6s ease-in-out infinite}
.tb-online.is-empty{color:#6b7a91;background:#f8faff;border-color:#e6ecf7}
.tb-online.is-empty b{color:#7b8aa1}
.tb-online.is-empty .tb-dot{background:#c3cede;box-shadow:0 0 0 3px rgba(195,206,222,.16);animation:none}

.tb-div{width:1px;height:22px;background:#e8eef8;margin:0 2px;flex:0 0 auto}

/* 账号 */
.window-account{height:38px;padding:3px 9px 3px 3px;border-radius:999px;gap:8px;border:1px solid transparent;
  display:inline-flex;align-items:center;background:transparent;transition:background .16s,border-color .16s}
.window-account:hover,.window-account[data-state=open]{background:#f3f7ff;border-color:#e3ecfb}
.window-account b{font-size:12.5px;font-weight:650;color:#1b2637;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.window-account-face{width:30px!important;height:30px!important;font-size:11px!important;border-radius:50%;
  background:linear-gradient(140deg,#5b95ff,#2b6bff 52%,#17b6ff)!important;
  box-shadow:0 4px 10px rgba(43,107,255,.30)}
.tb-caret{width:13px;height:13px;color:#9aabc2;flex:0 0 auto}

/* 退出 */
.tb-logout{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 11px;border-radius:10px;
  border:1px solid #e6ecf7;background:#fff;color:#5d6b82;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s}
.tb-logout svg{width:14px;height:14px;flex:0 0 auto}
.tb-logout:hover{color:#d92d3a;background:#fff5f6;border-color:#ffd6db;box-shadow:0 8px 18px -12px rgba(217,45,58,.55)}
.tb-logout:active{transform:translateY(.5px)}
.tb-logout:focus-visible{outline:2px solid rgba(217,45,58,.30);outline-offset:2px}

@keyframes tbPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* 响应式收敛 */
@media (max-width:1180px){
  .window-chrome{padding:0 14px!important;gap:10px}
  .tb-chip .tb-label{display:none}
  .tb-chip{padding:0 9px}
  .window-account b{max-width:120px}
}
@media (max-width:900px){
  .window-brand-block small{display:none}
  .window-account b,.tb-caret{display:none}
  .window-account{padding:3px}
  .tb-logout span{display:none}
  .tb-logout{padding:0 9px}
  .tb-div{display:none}
  .window-chrome{height:60px!important;min-height:60px!important}
}

@media (max-width:720px){
  .tb-lat{display:none}
  .window-brand-name{font-size:17px}
  .window-brand-block small{display:none}
  .window-chrome{padding:0 10px!important;gap:8px}
  .window-chrome-right{gap:6px}
  .tb-chip{padding:0 8px}
  .tb-logout{padding:0 8px}
}
@media (max-width:520px){
  .window-brand-name{display:none}
  .tb-div{display:none}
  .brand-mark{width:34px;height:34px}
}
