:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  background: Canvas;
  color: CanvasText;
}

body { margin: 0; }
main { width: min(920px, calc(100% - 32px)); margin: 48px auto; }
header, .editor-actions, .editor-footer { display: flex; align-items: center; gap: 12px; }
header { justify-content: space-between; margin-bottom: 24px; }
h1 { margin: 0 0 6px; font-size: 1.7rem; }
p { margin: 0; color: GrayText; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, transparent); }
th { font-size: .86rem; color: GrayText; }
a { color: LinkText; overflow-wrap: anywhere; }
button { border: 0; border-radius: 7px; padding: 9px 14px; background: #2463eb; color: #fff; cursor: pointer; }
button.secondary { background: color-mix(in srgb, CanvasText 10%, Canvas); color: CanvasText; }
button.danger { padding: 7px 10px; background: #b42318; }
button:disabled { opacity: .55; cursor: wait; }
input[type="text"], input[type="url"] { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid color-mix(in srgb, CanvasText 22%, transparent); border-radius: 6px; background: Canvas; color: CanvasText; }
.table-scroll { overflow-x: auto; margin: 16px 0; }
.editor-table { min-width: 650px; }
.editor-table th:nth-child(1) { width: 28%; }
.editor-table th:nth-child(2) { width: 52%; }
.editor-table th:nth-child(3) { width: 70px; }
.editor-footer { justify-content: flex-end; }
#status { margin-right: auto; color: GrayText; }
#empty { padding: 28px 12px; text-align: center; }

@media (max-width: 600px) {
  main { margin-top: 24px; }
  th, td { padding: 10px 8px; }
}