.app-body { overflow-x: clip; }
body[data-page] .topbar.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 72px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  background: #191b20;
  position: relative;
  z-index: 60;
}
.app-header .brand { justify-self: start; margin: 0; flex: none; order: initial; }
.app-header .header-navigation { min-width: 0; justify-self: center; }
.header-links { display: flex; gap: 8px; align-items: center; }
.header-links a, .header-menu nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border-radius: 22px; color: #b8b6c5; font-size: 15px; white-space: nowrap; }
.header-links a[aria-current="page"], .header-menu nav a[aria-current="page"] { background: #2a2d34; color: #f2f3f7; }
.header-links a:hover, .header-menu nav a:hover { background: #ffffff08; color: #efedf7; }
.header-right, .header-account-actions { display: flex; align-items: center; gap: 4px; }
.header-right { justify-content: flex-end; min-width: 0; }
.header-country { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; color: #d8d5e2; font-size: 14px; cursor: pointer; }
.header-country select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.header-country:focus-within { outline: 2px solid var(--accent); }
.country-flag { display: block; width: 24px; height: 18px; object-fit: cover; pointer-events: none; }
.app-header .profile-button { width: 44px; height: 44px; flex: 0 0 44px; margin: 0; order: initial; }
.header-menu, .header-notifications { position: relative; }
.header-menu { display: none; }
.app-header summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; cursor: pointer; color: #d8d5e2; list-style: none; }
.app-header summary::-webkit-details-marker { display: none; }
.app-header summary:hover { background: #ffffff08; }
.app-header :is(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-popover { position: absolute; top: calc(100% + 12px); left: 0; width: 220px; padding: 12px; background: #23262c; border-radius: 0; box-shadow: 0 16px 48px #0006; z-index: 70; }
.search-popover { left: auto; right: 12px; width: min(360px, calc(100vw - 44px)); }
.app-header .search-popover .global-search { display: flex; width: 100%; max-width: none; margin: 0; padding: 0 12px; background: #1a1b23; border-radius: 0; }
.app-header .global-search input { width: 100%; min-width: 0; height: 44px; padding: 10px 0; font-size: 16px; background: transparent; border: 0; }
.notification-popover { left: auto; right: -52px; width: min(340px, calc(100vw - 44px)); padding: 20px; }
.notification-popover h2 { margin: 0 0 16px; font-size: 20px; }
.notification-popover p { color: #b8b6c5; font-size: 15px; margin: 0 0 16px; }
.notification-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.notification-item > svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.notification-item strong { display: block; font-size: 15px; font-weight: 500; }
.notification-item small { display: block; color: #b8b6c5; font-size: 14px; margin-top: 4px; line-height: 1.5; }
.notification-library { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-size: 15px; margin-top: 8px; }
@media (max-width: 900px) {
  .header-links { display: none; }
  .header-menu { display: block; width: 44px; }
  .header-menu .header-popover { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 400px) {
  .app-header .brand { font-size: 15px; gap: 4px; }
  .app-header .brand-icon { width: 22px; height: 22px; }
  .header-country { width: 44px; }
  body[data-page] .topbar.app-header { gap: 0; }
}
@media (max-width: 700px) {
  body[data-page] .topbar.app-header { padding: 8px; gap: 4px; min-height: 64px; grid-template-columns: auto minmax(44px, 1fr) auto; }
  .app-header .brand { font-size: 17px; gap: 6px; }
  .app-header .brand-icon { width: 24px; height: 24px; }
  .header-right, .header-account-actions { gap: 0; }
  .app-header .profile-button { width: 40px; height: 40px; flex-basis: 40px; }
  .notification-popover { right: -40px; }
}

/* Neutral chrome leaves the artwork as the main source of colour. */
.app-header .brand-icon { background: #f0f1f4; color: #17191e; }
body[data-page] .app-header .profile-button { background: #292c32; color: #e7e9ed; }
.header-links a, .header-menu nav a { color: #b6bac2; }
.app-header summary { color: #d5d8df; }
.test-tools > summary { background: #292d34; color: #f0f1f4; }
.test-tools-panel { background: #22252b; color: #f0f1f4; }
.test-tools-panel .test-account-button[aria-pressed="true"] { background: #3a3f48; color: #fff; }
.test-tools-panel .test-account-button { color: #c4c8d0; }

.app-header .brand { gap: 10px; letter-spacing: -.7px; font-weight: 750; }
.brand-mark { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.brand-period { color: #a9adb6; }
.header-country { display: flex; align-items: center; justify-content: center; gap: 6px; width: 68px; }
.country-code { pointer-events: none; font-size: 13px; font-weight: 500; color: #d5d8df; }
@media (max-width: 700px) { .app-header .brand { gap: 6px; } .brand-mark { width: 26px; height: 26px; } }
@media (max-width: 400px) { .brand-mark { width: 22px; height: 22px; } }
@media (max-width: 700px) {
  .header-country { width: 56px; gap: 4px; }
  .header-country .country-flag { width: 20px; height: 15px; }
  .country-code { font-size: 12px; }
}
@media (max-width: 400px) {
  body[data-page] .topbar.app-header { gap: 0; }
  .app-header .brand { font-size: 14px; gap: 4px; }
  .brand-mark { width: 20px; height: 20px; }
}
.public-demo-notice { padding: 10px 20px; text-align: center; background: #25272b; color: #d9d9d5; font-size: 13px; line-height: 1.5; }