/* v0.36 Beta: refined shared TOP bars; the bottom navigation is unchanged. */
.app-header {
  min-height: calc(57px + env(safe-area-inset-top));
  gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) var(--page-gutter) 6px;
  background: #ffffffef;
  border-bottom: 1px solid #f2edf0;
  box-shadow: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.app-header .header-title {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.app-header .header-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.app-header .header-title h1 {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #352e34;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -.025em;
}
.app-header .header-title .sub {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #92838c;
  font-size: .6875rem;
  line-height: 14px;
  letter-spacing: .015em;
}
.app-header .header-title.has-beta .beta-tag {
  position: static;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 16px;
  margin: 0;
  padding: 0 4px;
  transform: none;
  border: 1px solid #eddde4;
  border-radius: 4px;
  background: #fff9fb;
  color: #a36982;
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
}
.app-header .head-actions {
  flex: 0 0 auto;
  gap: 2px;
}
.app-header .idpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #965d78;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
}
.app-header .idpill-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid #eddfe6;
  border-radius: 14px;
  background: #fffafb;
  box-shadow: 0 1px 1px #69405203;
}
.app-header .idpill-chevron {
  display: block;
  width: 4px;
  height: 4px;
  margin-top: -3px;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  opacity: .65;
  transform: rotate(45deg);
}
.app-header .head-actions .iconbtn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  color: #766572;
  background: transparent;
}
.app-header .head-actions .iconbtn .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.6;
}
.app-header .dot {
  top: 10px;
  right: 10px;
  width: 4px;
  height: 4px;
  background: #c27092;
  outline: 2px solid #fff;
}
.app-header .legacy-entry { flex: 0 0 44px; }
.app-header .backlabel {
  flex: 1 1 auto;
  min-width: 44px;
  min-height: 44px;
  gap: 3px;
  color: #453b43;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.app-header .backlabel .icon { width: 19px; height: 19px; }
.app-header .backlabel span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.app-header button:focus-visible {
  outline: 2px solid #c890a9;
  outline-offset: -2px;
  border-radius: 12px;
}
.app-header .idpill:active .idpill-face { background: #faeef3; }
.app-header .head-actions .iconbtn:active { background: #fbf4f7; }
@media (max-width: 359px) {
  .app-header { padding-left: 16px; padding-right: 12px; gap: 6px; }
  .app-header .head-actions { gap: 0; }
  .app-header .header-title-line { gap: 4px; }
  .app-header .idpill-face { gap: 5px; padding-left: 7px; padding-right: 7px; }
}