.iqr-widget {
  box-sizing: border-box;
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 1.25rem;
  border: 1px solid #dcdcde;
  border-radius: 14px;
  background: #fff;
}
.iqr-widget * { box-sizing: border-box; }
.iqr-header { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:1rem; }
.iqr-title { margin:0; }
.iqr-context { display:flex; flex-direction:column; gap:.2rem; font-size:.95rem; }
.iqr-time { font-size:1.35rem; font-weight:700; }
.iqr-timezone { opacity:.75; }
.iqr-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,320px); gap:1.5rem; align-items:start; }
.iqr-controls { min-width:0; }
.iqr-output { text-align:center; }
.iqr-fieldset { margin-bottom:1rem; }
.iqr-label { font-weight:600; margin-bottom:.5rem; }
.iqr-rating-buttons { display:grid; grid-template-columns:repeat(5, minmax(44px, 1fr)); gap:.5rem; }
.iqr-sentiment-buttons { display:grid; grid-template-columns:repeat(2, minmax(100px, 1fr)); gap:.5rem; }
.iqr-choice,
.iqr-location-button,
.iqr-refresh-button,
.iqr-pause-button {
  min-height:44px;
  padding:.6rem .85rem;
  border:1px solid #8c8f94;
  border-radius:8px;
  background:#f6f7f7;
  cursor:pointer;
  font:inherit;
}
.iqr-choice:hover,
.iqr-location-button:hover,
.iqr-refresh-button:hover,
.iqr-pause-button:hover { background:#f0f0f1; }
.iqr-choice.is-active { background:#2271b1; color:#fff; border-color:#2271b1; }
.iqr-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.iqr-location-wrap { margin:1rem 0; }
.iqr-location-status { margin-top:.45rem; font-size:.9rem; opacity:.8; }
.iqr-custom-value { width:100%; max-width:360px; min-height:44px; padding:.6rem .75rem; border:1px solid #8c8f94; border-radius:8px; }
.iqr-payload-wrap { margin-top:1rem; }
.iqr-payload { display:block; padding:.75rem; border-radius:8px; background:#f6f7f7; overflow-wrap:anywhere; white-space:normal; }
.iqr-canvas-wrap { display:inline-flex; padding:.75rem; background:#fff; border:1px solid #dcdcde; border-radius:10px; }
.iqr-canvas { max-width:100%; height:auto; display:block; }
.iqr-selected { margin-top:.8rem; font-weight:600; }
.iqr-window, .iqr-status { margin-top:.3rem; font-size:.9rem; opacity:.75; }
@media (max-width: 720px) {
  .iqr-layout { grid-template-columns:1fr; }
  .iqr-output { order:-1; }
}