.app-topbar.app-topbar { position: sticky; top: 0; z-index: 1000; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(180px, 1fr); align-items: center; gap: 20px; width: 100%; padding: 12px clamp(18px, 3vw, 44px); border-bottom: 1px solid #d9e2dc; background: #fff; box-shadow: 0 3px 12px #223d2d0b; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.app-topbar .app-brand { margin: 0; flex: initial; color: #192520; font-size: 1.12rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; text-decoration: none; }
.app-topbar .app-section-toggle { display: flex; order: initial; width: auto; justify-content: center; align-self: center; gap: 4px; padding: 4px; margin: 0; border: 1px solid #d9e2dc; border-radius: 11px; background: #eef2ee; overflow-x: auto; }
.app-topbar .app-section-toggle a { padding: 9px 15px; border-radius: 8px; color: #63726b; font-size: .9rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.app-topbar .app-section-toggle a:hover { color: #10553a; }
.app-topbar .app-section-toggle a.active { background: #166f4a; color: #fff; box-shadow: 0 1px 4px #152b1c17; }
.app-topbar .app-account { display: flex; justify-content: end; align-items: center; gap: 10px; margin: 0; flex: initial; }
.app-topbar .account-profile { color: #63726b; font-size: .84rem; font-weight: 650; white-space: nowrap; width: 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.app-topbar .account-pending { height: 14px; border-radius: 5px; background: #edf1ee; }
.app-topbar .app-account form { margin: 0; }
.app-topbar .account-link { color: #10553a; font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; min-width: 70px; text-align: center; }
.app-topbar .account-button { color: #192520; background: white; border: 1px solid #d9e2dc; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: .84rem; cursor: pointer; white-space: nowrap; min-width: 70px; }
.app-topbar [hidden] { display: none !important; }
html[data-developer-mode="off"] [data-developer-only] { display:none !important; }
html:not([data-signed-in="true"]) [data-authenticated-only] { display:none !important; }
@media (max-width: 1100px) {
  .app-topbar.app-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; }
  .app-topbar .app-section-toggle { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
@media (max-width: 480px) {
  .app-topbar.app-topbar { padding: 12px 14px; gap: 12px; }
  .app-topbar .app-brand { font-size: .94rem; }
  .app-topbar .app-section-toggle { gap: 0; }
  .app-topbar .app-section-toggle a { font-size: .75rem; padding: 9px 7px; }
  .app-topbar .app-account { gap: 6px; }
  .app-topbar .account-profile { width: 90px; font-size: .73rem; }
}
body { overflow-y: scroll; }
.app-topbar .account-settings { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:#63726b; flex:none; }
.app-topbar .account-settings:hover,.app-topbar .account-settings[aria-current] { background:#edf4ee; color:#166f4a; }
.app-topbar .account-settings svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.app-topbar .app-account { align-self:center; }
.app-topbar,.app-topbar * { box-sizing:border-box; }