:root {
  color-scheme: dark;
}

/* Compact mode: minimal circle for embedding in iframes */
.compact body,
body.compact {
  background: transparent;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body.compact .card {
  padding: 0;
  border-radius: 999px;
  box-shadow: none;
  background: transparent;
  min-width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.compact .quality-indicator {
  padding: 6px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 0 6px 18px rgba(15, 32, 71, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

body.compact .quality-indicator .quality-dot {
  width: 28px;
  height: 28px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
  background: currentColor;
}

/* hide everything else in compact view */
body.compact h1,
body.compact .value,
body.compact .status,
body.compact .stats,
body.compact #quality-label {
  display: none !important;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  margin: 0;
  min-height: 100vh;
  color: #f8fafc;
  background:
    radial-gradient(1100px circle at -10% -25%, rgba(99, 102, 241, 0.28), transparent 60%),
    radial-gradient(900px circle at 120% 115%, rgba(236, 72, 153, 0.22), transparent 65%),
    #050816;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

body:not(.compact) {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Balanced vertical and horizontal padding using logical properties so
     top/bottom (padding-block) and left/right (padding-inline) are explicit. */
  padding-block: 24px;
  padding-inline: 24px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

body:not(.compact)::before,
body:not(.compact)::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(110px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

body:not(.compact)::before {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 70%);
  /* move the top bloom slightly closer to center to avoid pushing the card down */
  top: -300px;
  left: -160px;
}

body:not(.compact)::after {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 70%);
  /* match the top offset magnitude so visual weight is centered */
  bottom: -300px;
  right: -160px;
}

body:not(.compact) .page-wrapper {
  position: relative;
  /* allow a slightly wider layout on large displays while remaining fluid */
  width: min(1200px, 100%);
  padding: 12px;
  z-index: 1;
  /* ensure the page-wrapper doesn't shift the visual center by adding margins */
  margin: 0 auto;
}

.card {
  position: relative;
  padding: 42px;
  border-radius: 26px;
  box-shadow: 0 42px 90px rgba(2, 6, 23, 0.55);
  background: linear-gradient(155deg, rgba(17, 24, 52, 0.94), rgba(8, 12, 30, 0.88));
  border: 1px solid rgba(99, 102, 241, 0.32);
  backdrop-filter: blur(28px);
  min-width: 320px;
}

body:not(.compact) .card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(circle at 85% 15%, rgba(129, 140, 248, 0.2), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 36px);
  letter-spacing: -0.04em;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
  position: relative;
  z-index: 1;
}

.title-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subtitle {
  margin: 0;
  font-size: 16px;
  color: rgba(226, 232, 240, 0.72);
  letter-spacing: 0;
  max-width: 460px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.region-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(59, 130, 246, 0.12));
  border: 1px solid rgba(129, 140, 248, 0.45);
  color: #c7d2fe;
  min-width: 210px;
  box-shadow: 0 18px 32px rgba(67, 56, 202, 0.32);
}

/* region-dot removed: visual indicator omitted to display only region name */

.region-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* preserve spacing that was previously provided by the removed region-dot */
  padding-left: 25px;
}

.region-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.6);
}

.region-name {
  font-weight: 600;
  font-size: 16px;
  color: inherit;
}

.copy-button {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border: 1px solid rgba(139, 92, 246, 0.55);
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 14px;
  color: #f8fafc;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 0;
  box-shadow: 0 20px 34px rgba(99, 102, 241, 0.35);
}

.copy-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 38px rgba(129, 140, 248, 0.45);
  filter: brightness(1.05);
}

.copy-button:focus-visible {
  outline: 3px solid rgba(129, 140, 248, 0.55);
  outline-offset: 2px;
}

.card-body {
  display: grid;
  /* Create three row tracks so stats can occupy two rows on the left while the trend card sits in the second row on the right
     Columns: left for summary, right for trend */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto; /* top stats row, bottom stats row */
  gap: 32px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.insights-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* occupy the full left column height (span both rows) so the trend card on the right
     which also spans both rows will match its top and bottom */
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* split the stats into two rows so we can align the trend card with the bottom of the first row */
.stats-top {
  display: grid;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 18px;
}

.stats-bottom {
  display: grid;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 18px;
}

.latency-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 28px;
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(37, 99, 235, 0.28), rgba(14, 116, 144, 0.24));
  border: 1px solid rgba(96, 165, 250, 0.35);
  box-shadow: 0 28px 55px rgba(37, 99, 235, 0.28);
  overflow: hidden;
}

.latency-summary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 80% 10%, rgba(6, 182, 212, 0.28), transparent 70%);
  pointer-events: none;
}

.quality-indicator {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  margin: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(30, 64, 175, 0.35);
  color: #bfdbfe;
  box-shadow: 0 24px 48px rgba(37, 99, 235, 0.32);
  transition: background 180ms ease, color 180ms ease, box-shadow 200ms ease;
  align-self: flex-start;
  position: relative;
  z-index: 1;
}

.quality-indicator .quality-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.5);
}

.quality-indicator.quality-ok {
  background: rgba(22, 163, 74, 0.28);
  color: #bbf7d0;
  box-shadow: 0 24px 46px rgba(34, 197, 94, 0.3);
}

.quality-indicator.quality-warn {
  background: rgba(217, 119, 6, 0.28);
  color: #fde68a;
  box-shadow: 0 24px 46px rgba(245, 158, 11, 0.28);
}

.quality-indicator.quality-error {
  background: rgba(239, 68, 68, 0.28);
  color: #fecaca;
  box-shadow: 0 24px 46px rgba(248, 113, 113, 0.3);
}

.quality-indicator.quality-offline {
  background: rgba(148, 163, 184, 0.28);
  color: #e2e8f0;
  box-shadow: 0 24px 44px rgba(148, 163, 184, 0.3);
}

.value {
  display: flex;
  /* align the numeric value and its unit on the text baseline for perfect alignment */
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  font-size: clamp(56px, 8vw, 72px);
  font-weight: 700;
  margin: 4px 0 6px;
  position: relative;
  z-index: 1;
  line-height: 1;
}

#latency-value {
  min-width: 110px;
  line-height: 1;
}

.unit {
  font-size: 24px;
  color: rgba(226, 232, 240, 0.75);
  font-weight: 500;
  line-height: 1;
  display: inline-block;
  /* tiny nudge to visually centre the unit with the large number across browsers */
  transform: translateY(0.06em);
}

.status {
  margin: 0;
  font-size: 16px;
  color: rgba(203, 213, 225, 0.85);
  position: relative;
  z-index: 1;
}

.status.status-ok {
  color: #6ee7b7;
}

.status.status-warn {
  color: #fbbf24;
}

.status.status-error {
  color: #fca5a5;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 22px;
}

.stat {
  position: relative;
  border-radius: 20px;
  padding: 22px 24px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 24px 38px rgba(2, 6, 23, 0.4);
  overflow: hidden;
  background: rgba(15, 23, 42, 0.75);
}

.stat::after {
  content: "";
  position: absolute;
  top: -36px;
  right: -36px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.32), transparent 70%);
  opacity: 0.65;
  pointer-events: none;
}

.stat[data-metric="avg"] {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.26), rgba(37, 99, 235, 0.18));
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 26px 40px rgba(14, 165, 233, 0.28);
}

.stat[data-metric="jitter"] {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(234, 179, 8, 0.18));
  border-color: rgba(234, 179, 8, 0.4);
  box-shadow: 0 26px 40px rgba(245, 158, 11, 0.25);
}

.stat[data-metric="best"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(16, 185, 129, 0.18));
  border-color: rgba(34, 197, 94, 0.38);
  box-shadow: 0 26px 40px rgba(16, 185, 129, 0.25);
}

.stat[data-metric="worst"] {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.32), rgba(239, 68, 68, 0.22));
  border-color: rgba(239, 68, 68, 0.38);
  box-shadow: 0 26px 40px rgba(248, 113, 113, 0.3);
}

.stat[data-metric="success"] {
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.3), rgba(168, 85, 247, 0.22));
  border-color: rgba(165, 180, 252, 0.42);
  box-shadow: 0 26px 40px rgba(139, 92, 246, 0.28);
}

.stat-title {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.66);
  position: relative;
  z-index: 1;
}

.stat-value {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.stat-unit {
  font-size: 15px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.75);
}

.trend-card {
  position: relative;
  padding: 28px 28px 24px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(76, 29, 149, 0.62), rgba(37, 99, 235, 0.5));
  border: 1px solid rgba(129, 140, 248, 0.45);
  box-shadow: 0 32px 62px rgba(37, 99, 235, 0.35);
  overflow: hidden;
  /* place the trend card in the second row so its bottom lines up with the bottom of the top stats row */
  grid-column: 2 / 3;
  grid-row: 1 / 3; /* span both rows but we'll vertically align it to the bottom of the first row using margin adjustments below */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* avoid becoming taller than the viewport on smaller displays: leave some room for padding/header
     and let the canvas area scroll internally if necessary */
  /* Cap the trend card so it can't become excessively tall on narrow/tall viewports.
    Use min() to allow flexibility across devices while keeping a safe maximum. */
  max-height: min(60vh, calc(100vh - 220px));
  overflow: hidden;
}

/* Nudge the trend card down so its bottom aligns visually with the top stats row bottom.
   Using a small top margin that adapts at different breakpoints keeps alignment consistent. */
.trend-card.align-nudge {
  /* remove the old top nudge so the trend card aligns with the top of the left column
     any small visual spacing is handled by the card padding and grid gap */
  margin-top: 0;
}

.trend-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 18%, rgba(56, 189, 248, 0.3), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.trend-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}

.trend-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ede9fe;
}

.trend-window {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.25);
  color: #e0e7ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trend-window::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.6;
}

/* make the canvas scale responsively while preserving aspect ratio */
#latency-trend-canvas {
  position: relative;
  width: 100%;
  /* allow the canvas to grow to fill the available vertical space inside the trend card
     on wide layouts the card spans both rows of the grid so the canvas will expand accordingly */
  /* allow the canvas to grow to available space but not exceed its parent's max-height */
  flex: 1 1 0%;
  min-height: 160px;
  display: block;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(17, 24, 39, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 1;
  height: 100%;
  max-height: 100%;
  max-height: none;
}

/* when the trend-card is constrained, allow the canvas area to scroll if its contents overflow */
.trend-card .trend-footer {
  /* ensure footer remains visible by preventing it from being pushed off-screen; if needed the canvas will scroll */
  flex-shrink: 0;
}

.trend-card .trend-canvas-wrap {
  /* helper container for scrollable canvas area if we need to enable internal scrolling */
  overflow: auto;
}

.trend-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 13px;
  color: #c7d2fe;
  position: relative;
  z-index: 1;
}

.trend-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #e0e7ff;
}

.trend-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.55);
}

.trend-status {
  font-weight: 500;
  color: #d6dcff;
  text-align: right;
  min-width: 150px;
  flex: 1;
  word-break: break-word;
}

.copy-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.copy-popup {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(34, 197, 94, 0.95));
  color: white;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 24px 46px rgba(14, 165, 233, 0.35);
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 320px;
  word-break: break-all;
}

.copy-popup.show {
  opacity: 1;
  transform: translateY(0);
}

.copy-popup.error {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.95), rgba(220, 38, 38, 0.95));
}

/* breakpoint for medium screens: collapse two-column layout into single column */
@media (max-width: 960px) {
  body:not(.compact) {
    /* medium screens: explicit vertical and horizontal padding */
  padding-block: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-inline: 18px;
  }

  .card {
    padding: 34px;
  }

  .card-body {
    grid-template-columns: 1fr;
  }

  .insights-panel {
    gap: 26px;
    /* reset the spanning so the panel flows naturally in single-column layout */
    grid-column: auto;
    grid-row: auto;
  }

  /* relax trend-card height constraint on narrower screens so content isn't clipped
     and the layout can flow vertically */
  .trend-card {
    /* keep a reasonable cap even on narrower screens so the chart doesn't become huge */
    max-height: min(55vh, calc(100vh - 180px));
    overflow: auto; /* allow internal scroll if contents exceed the cap */
  }

  .header-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .card {
    padding: 28px 24px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .header-actions {
    width: 100%;
  }

  .region-pill {
    width: 100%;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .trend-card {
    padding: 24px 22px 20px;
    /* on very small screens allow unlimited height so chart and footer can stack naturally */
    max-height: min(50vh, calc(100vh - 140px));
    overflow: auto;
  }

  /* prefer slightly taller chart on small phones while keeping aspect ratio fallback */
  #latency-trend-canvas {
    aspect-ratio: 14 / 7;
    max-height: 100%;
    height: auto;
  }

  .trend-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .trend-status {
    text-align: left;
  }
}

/* very large displays: give more horizontal breathing room and center the card */
@media (min-width: 1400px) {
  body:not(.compact) {
    /* large screens: slightly larger vertical and horizontal padding */
  padding-block: 64px;
  padding-top: 64px;
  padding-bottom: 64px;
  padding-inline: 40px;
  }

  body:not(.compact) .page-wrapper {
    width: min(1400px, 100%);
  }

  .card {
    padding: 56px;
  }
}

/* tiny phones: reduce geometry and font-sizes to keep everything readable */
@media (max-width: 360px) {
  .card {
    padding: 18px;
    border-radius: 18px;
  }

  .value {
    font-size: clamp(34px, 12vw, 44px);
  }

  .stat-value { font-size: 22px; }

  .quality-indicator { padding: 8px 12px; gap: 8px; }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }

  body {
    color: #0f172a;
    background:
      radial-gradient(920px circle at -12% -20%, rgba(59, 130, 246, 0.18), transparent 55%),
      radial-gradient(820px circle at 110% 120%, rgba(244, 114, 182, 0.14), transparent 65%),
      #eef2ff;
  }

  .card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 40px 80px rgba(15, 32, 71, 0.18);
  }

  body:not(.compact) .card::before {
    background: radial-gradient(circle at 85% 15%, rgba(79, 70, 229, 0.18), transparent 68%);
  }

  .subtitle {
    color: #475569;
  }

  .region-pill {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06));
    border-color: rgba(59, 130, 246, 0.32);
    color: #1e3a8a;
    box-shadow: 0 18px 32px rgba(59, 130, 246, 0.18);
  }

  .region-label {
    color: rgba(30, 64, 175, 0.65);
  }

  .copy-button {
    box-shadow: 0 18px 28px rgba(99, 102, 241, 0.22);
  }

  .latency-summary {
    background: linear-gradient(150deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06));
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 25px 48px rgba(59, 130, 246, 0.16);
  }

  .quality-indicator {
    color: #1d4ed8;
    background: rgba(191, 219, 254, 0.75);
    box-shadow: 0 24px 38px rgba(59, 130, 246, 0.18);
  }

  .quality-indicator .quality-dot {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7);
  }

  .quality-indicator.quality-ok {
    background: rgba(187, 247, 208, 0.9);
    color: #047857;
  }

  .quality-indicator.quality-warn {
    background: rgba(254, 240, 138, 0.92);
    color: #b45309;
  }

  .quality-indicator.quality-error {
    background: rgba(254, 202, 202, 0.92);
    color: #b91c1c;
  }

  .quality-indicator.quality-offline {
    background: rgba(226, 232, 240, 0.9);
    color: #334155;
  }

  .unit,
  .stat-unit {
    color: rgba(226, 232, 240, 0.66);
  }

  .status {
    color: #475569;
  }

  .stat {
    background: rgba(249, 250, 251, 0.85);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 22px 36px rgba(148, 163, 184, 0.18);
  }

  .stat::after {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.22), transparent 70%);
  }

  #latency-trend-canvas {
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.95), rgba(219, 234, 254, 0.85));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  .trend-card {
    background: linear-gradient(150deg, rgba(129, 140, 248, 0.28), rgba(96, 165, 250, 0.18));
    border-color: rgba(129, 140, 248, 0.32);
    box-shadow: 0 30px 58px rgba(99, 102, 241, 0.22);
  }

  .trend-title,
  .trend-legend,
  .trend-footer,
  .trend-window {
    color: rgba(226, 232, 240, 0.66);
  }

  .trend-window {
    background: rgba(129, 140, 248, 0.15);
  }

  .trend-dot {
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
  }

  .copy-popup {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(56, 189, 248, 0.95));
    box-shadow: 0 20px 38px rgba(56, 189, 248, 0.25);
    color: #0f172a;
  }

  .copy-popup.error {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.95), rgba(220, 38, 38, 0.95));
    color: white;
  }
}
:root {
  color-scheme: dark;
}

/* Compact mode: minimal circle for embedding in iframes */
.compact body,
body.compact {
  background: transparent;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body.compact .card {
  padding: 0;
  border-radius: 999px;
  box-shadow: none;
  background: transparent;
  min-width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.compact .quality-indicator {
  padding: 6px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: 0 6px 18px rgba(15, 32, 71, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

body.compact .quality-indicator .quality-dot {
  width: 28px;
  height: 28px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
  background: currentColor;
}

/* hide everything else in compact view */
body.compact h1,
body.compact .value,
body.compact .status,
body.compact .stats,
body.compact #quality-label {
  display: none !important;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  margin: 0;
  min-height: 100vh;
  color: #f8fafc;
  background:
    radial-gradient(1100px circle at -10% -25%, rgba(99, 102, 241, 0.28), transparent 60%),
    radial-gradient(900px circle at 120% 115%, rgba(236, 72, 153, 0.22), transparent 65%),
    #050816;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

body:not(.compact) {
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep balanced but modest padding on most screens */
  padding-block: 24px;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-inline: 24px;
  position: relative;
  overflow: hidden;
}

body:not(.compact)::before,
body:not(.compact)::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(110px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

body:not(.compact)::before {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 70%);
  top: -200px;
  left: -160px;
}

body:not(.compact)::after {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 70%);
  bottom: -200px;
  right: -160px;
}

body:not(.compact) .page-wrapper {
  position: relative;
  /* allow a slightly wider layout on large displays while remaining fluid */
  width: min(1200px, 100%);
  padding: 0 12px;
  z-index: 1;
}

.card {
  position: relative;
  padding: 42px;
  border-radius: 26px;
  box-shadow: 0 42px 90px rgba(2, 6, 23, 0.55);
  background: linear-gradient(155deg, rgba(17, 24, 52, 0.94), rgba(8, 12, 30, 0.88));
  border: 1px solid rgba(99, 102, 241, 0.32);
  backdrop-filter: blur(28px);
  min-width: 320px;
}

body:not(.compact) .card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(circle at 85% 15%, rgba(129, 140, 248, 0.2), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 36px);
  letter-spacing: -0.04em;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
  position: relative;
  z-index: 1;
}

.title-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subtitle {
  margin: 0;
  font-size: 16px;
  color: rgba(226, 232, 240, 0.72);
  letter-spacing: 0;
  max-width: 460px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.region-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(59, 130, 246, 0.12));
  border: 1px solid rgba(129, 140, 248, 0.45);
  color: #c7d2fe;
  min-width: 210px;
  box-shadow: 0 18px 32px rgba(67, 56, 202, 0.32);
}

/* region-dot removed: visual indicator omitted to display only region name */

.region-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* preserve spacing that was previously provided by the removed region-dot */
  padding-left: 25px;
}

.region-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: rgba(226, 232, 240, 0.6);
}

.region-name {
  font-weight: 600;
  font-size: 16px;
  color: inherit;
}