/* Shared header and footer, option 3: account above, sync information below. */
:root{--site-topbar-height:64px}
.site-topbar{position:sticky;top:0;z-index:8;height:var(--site-topbar-height);min-height:var(--site-topbar-height);padding:0 32px;gap:16px;flex:none;background:#fff;border-bottom:1px solid #e8edf4;box-shadow:none}
.site-footer{min-height:48px;flex:none;align-items:center;padding:10px 32px;gap:16px;border-top:1px solid #dde6f5;background:#fff;font-size:12px;line-height:20px}
.chrome-crumb,.chrome-tools,.chrome-brand{display:flex;align-items:center;min-width:0;gap:12px}
.chrome-crumb{font-size:13px;color:var(--muted)}
.chrome-crumb strong{min-width:0;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.crumb-parent{white-space:nowrap}
.crumb-parent:hover{color:var(--primary)}
.crumb-separator{color:#a6b4c7}
.chrome-outline-icon{width:16px;height:16px;color:#8595ab;flex:none}
.chrome-tools{gap:16px;white-space:nowrap}
.chrome-divider{width:1px;height:14px;flex:none;background:var(--line)}
.chrome-refresh{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 13px;border:1px solid var(--line);border-radius:5px;background:#fff;color:#465a77;font-size:12px;line-height:20px;cursor:pointer}
.chrome-refresh svg{width:15px;height:15px;flex:none;color:var(--primary)}
.chrome-refresh:hover{background:var(--blue-soft)}
.chrome-login{display:inline-flex;align-items:center;justify-content:center;min-width:72px;min-height:36px;padding:7px 20px;border:1px solid var(--primary);border-radius:5px;background:var(--primary);color:#fff;font-size:13px;font-weight:500;line-height:20px;text-decoration:none}
.chrome-login:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.chrome-login:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.chrome-refresh:focus-visible,.chrome-user:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.chrome-user{display:inline-flex;align-items:center;gap:9px;min-height:44px;max-width:184px;padding:4px 0;border-radius:5px;color:var(--text);font-size:13px;line-height:22px;text-decoration:none;cursor:pointer}
.chrome-user:hover{color:var(--primary)}
.chrome-avatar{display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid #dfe7f4;border-radius:50%;overflow:hidden;background:var(--blue-soft);color:var(--primary);font-size:14px}
.chrome-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.chrome-user-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrome-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:20px;white-space:nowrap}
.chrome-status.good{color:#087b65}
.chrome-status.neutral{color:var(--muted)}
.chrome-status.warn{color:#95641b}
.chrome-status svg{width:15px;height:15px;flex:none}
.chrome-updated{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chrome-brand{gap:8px;white-space:nowrap}
.chrome-brand img{display:block;width:19px;height:19px;flex:none}
.chrome-brand strong{font-size:12px;font-weight:500;color:#607493}
.brand-caption{margin-left:3px;padding-left:11px;border-left:1px solid var(--line);font-size:12px;color:var(--muted)}
@media(max-width:1000px){
  .site-topbar,.site-footer{padding-left:24px;padding-right:24px}
  .chrome-tools{gap:12px}
}
@media(max-width:767px){
  :root{--site-topbar-height:60px}
  .site-topbar{padding:8px 16px;gap:8px}
  .site-footer{padding:12px 16px;gap:10px;flex-wrap:wrap}
  .chrome-crumb{font-size:12px;gap:8px}
  .chrome-tools{gap:9px}
  .chrome-refresh{min-height:44px;padding:9px 10px}
  .chrome-login{min-height:44px;padding:9px 18px}
  .chrome-refresh span,.site-topbar .chrome-divider{display:none}
  .chrome-user{gap:6px;max-width:116px;font-size:12px}
  .chrome-avatar{width:28px;height:28px}
  .chrome-user-name{max-width:72px}
  .site-footer .chrome-tools{flex-wrap:wrap}
  .chrome-updated,.chrome-brand strong,.brand-caption{font-size:11px}
}
@media(max-width:420px){
  .site-topbar .crumb-parent,.site-topbar .crumb-separator{display:none}
  .site-footer{gap:8px}
  .site-footer .chrome-tools{gap:8px}
  .site-footer .brand-caption{display:none}
}