#approach-alert-banner {
  --approach-color: #ddd9cf;
  width: max-content;
  max-width: min(480px, calc(100vw - 160px));
  border: 1px solid var(--approach-color);
  border-radius: 9px;
  background: rgba(16, 15, 14, .96);
  color: #fbfaf9;
  box-shadow: 0 0 0 1px #fff9, 0 3px 14px #0008;
  font: 13px/1.4 var(--font-ui);
}
#approach-alert-banner button { font: inherit; text-align: left; cursor: pointer; }
#approach-alert-banner button:focus-visible { outline: 2px solid white; outline-offset: -3px; }
.approach-banner-toggle { background: transparent; border: 0; color: inherit; width: 100%; padding: 8px 13px; display: flex; flex-direction: column; align-items: center; }
.approach-banner-toggle:disabled { cursor: default !important; opacity: 1; }
.approach-banner-title { color: var(--approach-color); font-weight: 800; text-align: center; }
.approach-banner-quality { color: #edeae5; font-size: 11px; }
.approach-banner-quality:empty { display: none; }
.approach-alert-list { max-height: 260px; overflow-y: auto; border-top: 1px solid #8b7f64; padding: 5px; }
.approach-alert-item { display: grid; gap: 2px; width: 100%; background: transparent; border: 0; border-left: 3px solid var(--approach-color); color: #fbfaf9; padding: 6px 9px; margin: 4px 0; }
.approach-alert-item span { color: var(--approach-color); }
.approach-alert-item:hover { background: #ffffff14; }
.approach-alert-item small { color: #edeae5; }
.approach-level { background: #100f0e; border: 1px solid var(--approach-color); border-radius: 4px; color: var(--approach-color); font-weight: 800; padding: 5px 7px; margin: 4px 0 8px; text-shadow: 0 1px 2px #000; }
.approach-note { font-size: .8rem; color: var(--text-muted, #ddd9cf); margin-top: 6px; }
@media (max-width: 600px) {
  #approach-alert-banner { max-width: calc(100vw - 220px); font-size: 11px; }
  .approach-banner-toggle { padding: 6px 8px; }
}