#query {
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 110px);
  padding: 0;
  overflow: hidden;
  color: #f4f0e5;
  background: var(--panel-flat, #202739);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(9, 14, 24, 0.28);
}
#query .head { padding: 14px 16px 10px; gap: 12px; align-items: center; }
#query-title { font-size: 18px; line-height: 1.25; }
#query-close { width: 36px; height: 36px; flex-shrink: 0; }
#query-body { padding: 0 16px 16px; max-height: calc(100dvh - 178px); overflow-y: auto; overscroll-behavior: contain; font-size: 13px; line-height: 1.5; color: #c4cbd9; }
#query .query-location { margin: 0 0 12px; font-size: 12px; color: #c4cbd9; }
#query .query-description { margin: 0 0 16px; font-weight: 400; }
#query .query-facts { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 0; padding: 12px 0; border-top: 1px solid #424b61; }
#query .query-facts dt { font-weight: 400; }
#query .query-facts dd { margin: 0; color: #f4f0e5; text-align: right; font-variant-numeric: tabular-nums; }
#query .query-coverage { padding: 12px 0; border-top: 1px solid #424b61; }
#query .query-range-toggle { width: 100%; min-height: 36px; text-align: left; color: var(--coverage-color); font-size: 13px; }
#query .query-range-toggle::before { content: ""; display: inline-block; width: 9px; height: 9px; background: currentColor; margin-right: 8px; }
#query .query-range-toggle[aria-pressed="false"]::before { background: transparent; outline: 1px solid currentColor; }
#query .query-range-note { margin: 8px 0 0; font-size: 12px; font-weight: 400; }
#query .query-details { border-top: 1px solid #424b61; padding-top: 12px; }
#query .query-details h3 { margin: 0 0 8px; font-size: 13px; color: #f4f0e5; }
#query .query-condition { padding: 3px 0; font-weight: 400; }
#query .query-warning { color: #ffc29e; }
#query button:focus-visible { outline: 2px solid #f2c14e; outline-offset: 2px; }
@media (max-width: 600px) {
  #query { right: 12px; top: auto; bottom: 48px; max-height: 48dvh; }
  #query-body { max-height: calc(48dvh - 62px); }
}
#query { z-index: 9; max-height: calc(100dvh - 232px); display: flex; flex-direction: column; }
#query[hidden] { display: none; }
#query .head { flex-shrink: 0; }
#query-body { min-height: 0; max-height: none; }
#query .query-icon { width: 18px; height: 18px; flex: 0 0 18px; color: #a9b9d2; }
#query .query-facts dt,
#query .query-metrics dt { display: flex; align-items: center; gap: 8px; min-width: 0; }
#query .query-condition { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #353e52; }
#query .query-condition:last-child { border-bottom: 0; }
#query .query-condition .query-icon { margin-top: 1px; }
#query .query-condition-text { min-width: 0; overflow-wrap: anywhere; }
#query .query-success,
#query .query-success .query-icon { color: #b4dfbc; }
#query .query-warning,
#query .query-warning .query-icon { color: #ffc29e; }
#query .query-condition-activity.query-warning { background: #3b3030; border-radius: 8px; padding: 10px; margin: 6px 0; border-bottom: 0; }
#query .query-details { margin-top: 4px; padding-top: 14px; }
#query .query-details h3 { margin-bottom: 4px; font-size: 14px; }
#query .query-environment { margin-top: 14px; }
#query .query-metrics { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; margin: 0; }
#query .query-metrics dt,
#query .query-metrics dd { padding: 9px 0; border-bottom: 1px solid #353e52; }
#query .query-metrics dt { font-weight: 400; }
#query .query-metrics dd { margin: 0; color: #f4f0e5; text-align: right; font-variant-numeric: tabular-nums; }
#query .query-range-note { line-height: 1.45; }
#query .query-growth { padding: 14px 0; border-bottom: 1px solid #46516a; }
#query .query-growth-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
#query .query-growth-value { color: var(--growth-color); font-variant-numeric: tabular-nums; }
#query .query-growth-bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; overflow: hidden; background: #354258; accent-color: var(--growth-color); }
#query .query-growth-bar::-webkit-progress-bar { background: #354258; border-radius: 4px; }
#query .query-growth-bar::-webkit-progress-value { background: var(--growth-color); border-radius: 4px; }
#query .query-growth-bar::-moz-progress-bar { background: var(--growth-color); border-radius: 4px; }
#query .query-growth-tiers { display: flex; gap: 4px; margin-top: 9px; }
#query .query-growth-tiers span { flex: 1; text-align: center; font-size: 11px; color: #9baac1; border-bottom: 2px solid #354258; padding-bottom: 4px; }
#query .query-growth-tiers .reached { color: var(--growth-color); border-color: var(--growth-color); }
#query .query-growth-tiers .next { color: #edf0f5; border-color: #899bb6; }
#query .query-growth-status { margin: 9px 0 0; font-size: 12px; line-height: 1.45; color: #b4dfbc; }
@media (max-width: 600px) {
  #query { bottom: 48px; max-height: 48dvh; }
  body:has(#query:not([hidden])) #minimap { visibility: hidden; pointer-events: none; }
}
@media (max-height: 480px) and (min-width: 601px) {
  #query { max-height: calc(100dvh - 110px); }
  body:has(#query:not([hidden])) #minimap { visibility: hidden; pointer-events: none; }
}