.site-page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 10px max(16px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid #e5e8ea;
  box-shadow: 0 2px 12px rgba(24, 38, 48, .04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.site-page-header .back-to-board {
  justify-self: start;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, #153d31, #08a24d);
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(5, 119, 56, .2);
  transition: filter .18s ease, transform .18s ease;
}

.site-page-header .back-to-board:hover { filter: brightness(1.06); transform: translateY(-1px); }
.site-page-header .back-to-board:focus-visible { outline: 3px solid rgba(246, 160, 0, .58); outline-offset: 3px; }
.site-page-header .header-logo { display: block; width: 136px; max-height: 48px; object-fit: contain; }
.site-page-header .header-balance { min-width: 1px; }

@media (max-width: 560px) {
  .site-page-header { min-height: 62px; padding: 8px 10px; }
  .site-page-header .back-to-board { min-height: 40px; padding: 9px 11px; border-radius: 10px; font-size: .78rem; }
  .site-page-header .header-logo { width: 104px; }
}

@media (max-width: 370px) {
  .site-page-header { gap: 7px; }
  .site-page-header .back-to-board { padding-inline: 9px; font-size: .72rem; }
  .site-page-header .header-logo { width: 92px; }
}