.nagi-analytics-panel,
.nagi-analytics-manager {
  --nagi-cream: #f2e9da;
  --nagi-navy: #21364a;
  --nagi-gold: #be9a66;
  font-family: "Jost", ui-sans-serif, system-ui, sans-serif;
}

.nagi-analytics-panel {
  position: fixed;
  z-index: 2147483646;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(248px, 0.55fr);
  gap: 24px;
  width: min(760px, calc(100% - 36px));
  margin-left: auto;
  padding: 22px;
  border: 1px solid rgb(190 154 102 / 58%);
  border-radius: 8px;
  background: var(--nagi-cream);
  color: var(--nagi-navy);
  box-shadow: 0 16px 46px rgb(17 31 44 / 20%);
}

.nagi-analytics-panel[hidden],
.nagi-analytics-manager[hidden] {
  display: none;
}

.nagi-analytics-copy h2 {
  margin: 0 0 8px;
  color: var(--nagi-navy);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.1;
}

.nagi-analytics-copy p {
  margin: 0 0 8px;
  color: #4e5765;
  font-size: 0.84rem;
  line-height: 1.55;
}

.nagi-analytics-copy .nagi-analytics-status:empty {
  display: none;
}

.nagi-analytics-copy a {
  color: var(--nagi-navy);
  font-size: 0.78rem;
  text-decoration-color: var(--nagi-gold);
  text-underline-offset: 3px;
}

.nagi-analytics-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-self: end;
}

.nagi-analytics-actions button,
.nagi-analytics-manager {
  min-height: 44px;
  border: 1px solid var(--nagi-navy);
  border-radius: 3px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.nagi-analytics-actions button {
  padding: 10px 12px;
  background: transparent;
  color: var(--nagi-navy);
}

.nagi-analytics-actions button:hover,
.nagi-analytics-actions button:focus-visible {
  border-color: var(--nagi-gold);
  outline: 2px solid transparent;
  background: var(--nagi-navy);
  color: var(--nagi-cream);
}

.nagi-analytics-manager {
  position: fixed;
  z-index: 2147483645;
  right: 12px;
  bottom: 12px;
  min-height: 36px;
  padding: 7px 12px;
  border-color: rgb(190 154 102 / 72%);
  background: var(--nagi-cream);
  color: var(--nagi-navy);
  box-shadow: 0 5px 18px rgb(17 31 44 / 14%);
}

.nagi-analytics-manager:hover,
.nagi-analytics-manager:focus-visible {
  outline: 2px solid var(--nagi-gold);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .nagi-analytics-panel {
    right: 10px;
    bottom: 10px;
    left: 10px;
    grid-template-columns: 1fr;
    gap: 16px;
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
    overflow: auto;
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nagi-analytics-panel,
  .nagi-analytics-manager {
    scroll-behavior: auto;
  }
}