.app-nav { position: sticky; top: 0; z-index: 100; height: 57px; box-sizing: border-box; background: var(--card, #fff); border-bottom: 1px solid var(--border, #dce3ec); }
.app-nav-inner { width: min(1380px, calc(100% - 48px)); height: 56px; margin: auto; display: flex; align-items: center; gap: 24px; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; color: var(--brand-ink, #12233f); }
.app-nav .app-nav-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.app-nav-brand img { width: 30px; height: 30px; border-radius: 8px; }
.app-nav .app-nav-brand { color: var(--brand-ink, #12233f); }
.app-nav .app-nav-tabs { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; max-width: none; }
.app-nav-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: none; color: var(--text-secondary, #5f6b7c); white-space: nowrap; }
.app-nav-tabs a:hover, .app-nav-tabs a[aria-current=page] { background: var(--brand-mist, #eaf4ff); color: var(--brand-ink, #12233f); }
.app-nav a:focus-visible { outline: 2px solid var(--brand-warm, #8d5537); outline-offset: 2px; }
.app-nav-status { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 12px; color: var(--text-secondary, #5f6b7c); white-space: nowrap; }
.app-nav .service-state { display: inline-flex; align-items: center; gap: 7px; font: inherit; }
.app-nav .state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary, #5f6b7c); box-shadow: none; }
.app-nav .is-healthy .state-dot { background: #22834d; }
.app-nav .is-error .state-dot { background: #b13d2d; }
@media (max-width: 700px) { .app-nav-inner { width: calc(100% - 32px); gap: 12px; } .app-nav-meta { display: none; } .app-nav-tabs a { padding: 0 10px; } }
@media (max-width: 480px) { .app-nav-brand span { display: none; } .app-nav-status { font-size: 11px; } }
@media (max-width: 600px) { .app-nav-inner { width: 100%; padding: 0 10px; gap: 6px; } .app-nav-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; } .app-nav-tabs a { padding: 0 9px; font-size: 12px; } .app-nav-status { display: none; } }
@media (max-width: 360px) { .app-nav-tabs a { padding: 0 6px; font-size: 11px; } }
@media (max-width: 360px) { .app-nav-status { display: none; } }