:root {
  --sd-bg: #ffffff;
  --sd-fg: #111827;
  --sd-muted: #6b7280;
  --sd-border: #d1d5db;
  --sd-subtle: #f3f4f6;
  --sd-primary: #303030;
  --sd-shadow: 0 18px 60px rgba(15, 23, 42, 0.22);
}

.sd-panel {
  position: fixed;
  z-index: 2147483647;
  width: min(430px, calc(100vw - 24px));
  color: var(--sd-fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
}

.sd-panel--bottom-right { right: 16px; bottom: 16px; }
.sd-panel--bottom-left { left: 16px; bottom: 16px; }
.sd-panel--top-right { right: 16px; top: 16px; }
.sd-panel--top-left { left: 16px; top: 16px; }

.sd-panel__tab {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  border: 1px solid var(--sd-border);
  border-radius: 999px;
  background: var(--sd-primary);
  color: #fff;
  padding: 8px 12px;
  box-shadow: var(--sd-shadow);
  cursor: pointer;
}

.sd-panel--bottom-left .sd-panel__tab,
.sd-panel--top-left .sd-panel__tab {
  margin-left: 0;
  margin-right: auto;
}

.sd-panel__badge {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--sd-primary);
  font-size: 11px;
  font-weight: 700;
}

.sd-panel__body {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  background: var(--sd-bg);
  box-shadow: var(--sd-shadow);
}

.sd-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--sd-border);
  padding: 12px;
}

.sd-panel__header div {
  display: grid;
  gap: 2px;
}

.sd-panel__header small,
.sd-panel__empty,
.sd-event__meta span {
  color: var(--sd-muted);
}

.sd-panel button,
.sd-panel select {
  font: inherit;
}

.sd-panel__header button,
.sd-panel__actions button {
  border: 1px solid var(--sd-border);
  border-radius: 8px;
  background: #fff;
  padding: 6px 9px;
  cursor: pointer;
}

.sd-panel__section {
  display: grid;
  gap: 10px;
  border-bottom: 1px solid var(--sd-border);
  padding: 12px;
}

.sd-panel__section label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.sd-panel__section select {
  width: 100%;
  border: 1px solid var(--sd-border);
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
}

.sd-panel__pending,
.sd-panel__status,
.sd-panel__toast {
  border-radius: 10px;
  background: var(--sd-subtle);
  padding: 10px;
}

.sd-panel__status,
.sd-panel__toast {
  margin: 10px 12px 0;
}

.sd-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sd-panel__events {
  max-height: 360px;
  overflow: auto;
  padding: 12px;
}

.sd-event {
  border: 1px solid var(--sd-border);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.sd-event + .sd-event {
  margin-top: 8px;
}

.sd-event__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sd-panel pre {
  max-height: 160px;
  overflow: auto;
  margin: 8px 0 0;
  border-radius: 8px;
  background: #111827;
  color: #d1fae5;
  padding: 8px;
  font-size: 11px;
  line-height: 1.45;
}

ui-modal[data-shopify-debugger-open="true"] {
  display: block;
  position: fixed;
  inset: 15vh max(16px, calc((100vw - 560px) / 2)) auto;
  z-index: 2147483646;
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--sd-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sd-shadow);
  padding: 20px;
}