:root {
  --rt-turquoise: #12BFA6;
  --rt-turquoise-deep: #078D7E;
  --rt-ink: #071A26;
  --rt-slate: #405967;
  --rt-background: #F5F8F8;
  --rt-surface: #FFFFFF;
  --rt-border: #DFE8E7;
}

.app-header {
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(223, 232, 231, 0.92);
}

.app-header > div:first-child {
  min-width: 0;
}

.app-header .rt-brand-lockup {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 5px;
}

.app-header .rt-brand-logo {
  display: block;
  width: clamp(176px, 34vw, 226px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.app-header h1 {
  margin: 0;
  color: var(--rt-slate);
  font-size: clamp(0.78rem, 2.35vw, 0.9rem);
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.app-header .status-pill {
  flex: 0 0 auto;
  border: 1px solid rgba(18, 191, 166, 0.18);
  background: rgba(231, 250, 246, 0.9);
  color: var(--rt-turquoise-deep);
  box-shadow: none;
}

@media (max-width: 430px) {
  .app-header {
    gap: 10px;
    padding-top: max(15px, env(safe-area-inset-top));
    padding-right: 14px;
    padding-left: 14px;
  }

  .app-header .rt-brand-logo {
    width: clamp(158px, 47vw, 184px);
  }

  .app-header h1 {
    max-width: 190px;
    font-size: 0.74rem;
  }

  .app-header .status-pill {
    padding: 7px 9px;
    font-size: 0.67rem;
  }
}

@media (max-width: 350px) {
  .app-header .rt-brand-logo {
    width: 148px;
  }

  .app-header h1 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-brand-logo {
    animation: none !important;
    transition: none !important;
  }
}