.ml-goals {
  box-sizing: border-box;
  position: absolute;
  top: calc(68px + env(safe-area-inset-top));
  left: max(76px, env(safe-area-inset-left));
  width: 400px;
  max-width: calc(100% - 24px);
  max-height: calc(100dvh - 224px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: manipulation;
  z-index: 20;
  padding: 16px;
  border: 2px solid #536367;
  border-radius: 14px;
  background: #fcf7e8;
  color: #1d3036;
  box-shadow: 0 5px 24px #142e3940;
  font: 16px/1.4 system-ui, sans-serif;
}
.ml-goals[hidden] { display: none; }
.ml-goals h2 { margin: 10px 0; font-size: 21px; }
.ml-goals h3 { margin: 0; font-size: 17px; }
.ml-goals-list { list-style: none; margin: 0; padding: 0; }
.ml-goals-list li { padding: 12px 0; border-top: 1px solid #b5bdb4; }
.ml-goals-list p { margin: 6px 0; }
.ml-goals-status { font-size: 14px; }
.ml-goals-list [data-earned="true"] .ml-goals-status { color: #226354; font-weight: 700; }
.ml-goals button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #536367;
  border-radius: 8px;
  background: #fffdf7;
  color: inherit;
  font: inherit;
  touch-action: manipulation;
  cursor: pointer;
}
.ml-goals button:disabled { opacity: .55; cursor: default; }
.ml-goals :focus-visible { outline: 3px solid #146d91; outline-offset: 2px; }
@media (max-width: 899px), (max-height: 699px) {
  .ml-goals {
    left: max(12px, env(safe-area-inset-left));
    max-height: calc(100dvh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}