.nav-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-left: auto; justify-content: flex-end; }
.about-button {
  min-height: 2.5rem;
  padding: .55rem .8rem;
  border: 1px solid #30343d;
  border-radius: .5rem;
  color: #9ba3af;
  background: transparent;
  font: inherit;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
}
.about-button:hover, .about-button:focus-visible { border-color: #526071; color: #f3f4f6; outline: none; }
dialog { width: min(100% - 2rem, 620px); padding: 0; border: 1px solid #526071; border-radius: 1rem; background: #191b20; color: #f3f4f6; }
dialog::backdrop { background: rgb(0 0 0 / .7); }
.modal { padding: 1.5rem; }
.modal p { color: #b9bec8; }
.privacy-note { padding: .9rem 1rem; border: 1px solid #3c6756; border-radius: .6rem; color: #d9f5e8 !important; background: #1b2a25; }
.privacy-note strong { color: #74e0b4; }
.info-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.25rem 0 1.5rem; padding-bottom: .5rem; border-bottom: 1px solid #30343d; }
.info-tab { min-height: 2.5rem; padding: .55rem .8rem; border: 1px solid transparent; border-radius: .5rem; color: #9ba3af; background: transparent; font: inherit; cursor: pointer; }
.info-tab:hover, .info-tab:focus-visible { border-color: #526071; color: #f3f4f6; outline: none; }
.info-tab.active { border-color: #3c6756; color: #74e0b4; background: #1b2a25; }
.info-panel h3 { margin: 0 0 .75rem; font-size: 1rem; }
.info-panel p { max-width: 65ch; margin: 0 0 1rem; }
.metrics-modal { display: grid; gap: 1rem; }
.metrics-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #30343d; }
.metrics-head h2 { margin: 0; letter-spacing: -.03em; }
.metrics-scope, #metrics-loading, #metrics-error { margin: 0; color: #9ba3af; font-size: .88rem; }
#metrics-error { color: #f07178; }
.modal-close { min-height: 2.5rem; padding: .55rem .8rem; border: 1px solid #30343d; border-radius: .5rem; color: #b9bec8; background: transparent; font: inherit; cursor: pointer; }
.modal-close:hover, .modal-close:focus-visible { border-color: #526071; color: #f3f4f6; outline: none; }
.metrics-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; overflow: hidden; border: 1px solid #30343d; border-radius: .75rem; background: #30343d; }
.metrics-summary div { display: grid; gap: .25rem; padding: .9rem 1rem; background: #1d1f24; }
.metrics-summary dt { color: #9ba3af; font-size: .75rem; }
.metrics-summary dd { margin: 0; color: #f3f4f6; font-size: 1.25rem; font-weight: 750; }
.chart-card { padding: 1rem; border: 1px solid #30343d; border-radius: .75rem; background: #1d1f24; }
.chart-card h3 { margin: 0 0 .75rem; color: #74e0b4; font-size: .9rem; }
.chart { position: relative; min-height: 260px; }
.chart svg { display: block; width: 100%; height: 260px; overflow: visible; }
.chart-empty { margin: 5rem 0 0; color: #9ba3af; font-size: .88rem; text-align: center; }
.chart-gridline { stroke: #30343d; stroke-width: 1; }
.chart-axis { fill: #9ba3af; font: 10px system-ui, sans-serif; }
.chart-point { cursor: pointer; stroke: #1d1f24; stroke-width: 2; }
.chart-tooltip { position: absolute; top: .5rem; left: 50%; z-index: 1; display: grid; gap: .15rem; min-width: 9rem; padding: .55rem .7rem; border: 1px solid #526071; border-radius: .55rem; background: #101114; color: #74e0b4; font-size: .75rem; pointer-events: none; transform: translateX(-50%); }
.chart-tooltip strong { color: #f3f4f6; }
.chart-tooltip span { color: #9ba3af; }
.chart-tooltip[hidden] { display: none; }
.progress-row { display: flex; align-items: center; gap: .75rem; min-height: 1.5rem; margin: 1rem 0 .25rem; }
.progress-spinner {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  border: 2px solid #30343d;
  border-top-color: #74e0b4;
  border-radius: 50%;
  animation: jxl-spin .7s linear infinite;
}
.progress-spinner[hidden] { display: none; }
@keyframes jxl-spin { to { transform: rotate(360deg); } }
.primary-action.is-busy { position: relative; }
.primary-action.is-busy::after {
  content: "";
  position: absolute;
  inset: auto .85rem 50% auto;
  width: .85rem;
  height: .85rem;
  border: 2px solid rgb(255 255 255 / .25);
  border-top-color: #f3f4f6;
  border-radius: 50%;
  transform: translateY(50%);
  animation: jxl-spin .7s linear infinite;
}
@media (max-width: 640px) {
  .nav-actions { margin-left: auto; }
  .metrics-summary { grid-template-columns: 1fr; }
}