:root {
  --bg: #ffffff;
  --fg: #1b1a19;
  --muted: #605e5c;
  --line: #e1dfdd;
  --accent: #0f6cbd;
  --accent-hover: #115ea3;
  --accent-fg: #ffffff;
  --btn-bg: #ffffff;
  --btn-hover: #f3f2f1;
  --info-bg: #f3f9fd;
  --info-line: #0f6cbd;
  --warn-bg: #fff9f5;
  --warn-line: #d83b01;
  --error-bg: #fdf3f4;
  --error-line: #a4262c;
  --code-bg: #f3f2f1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f1f1f;
    --fg: #f3f2f1;
    --muted: #a19f9d;
    --line: #3d3d3d;
    --accent: #479ef5;
    --accent-hover: #62abf5;
    --accent-fg: #10243e;
    --btn-bg: #2b2b2b;
    --btn-hover: #383838;
    --info-bg: #10243e;
    --info-line: #479ef5;
    --warn-bg: #3a2317;
    --warn-line: #f7893b;
    --error-bg: #3b1a1c;
    --error-line: #f1707b;
    --code-bg: #2b2b2b;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.head__icon { border-radius: 4px; flex: none; }
.head__title { margin: 0; font-size: 17px; font-weight: 600; }
.head__sub { margin: 1px 0 0; font-size: 12px; color: var(--muted); }

.lede { margin: 14px 0 16px; color: var(--muted); }
.lede strong { color: var(--fg); font-weight: 600; }

.actions { display: flex; flex-direction: column; gap: 8px; }

.btn {
  appearance: none;
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--btn-bg);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .1s ease;
}
.btn:hover:not(:disabled) { background: var(--btn-hover); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  padding: 11px 14px;
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

.status {
  display: none;
  margin-top: 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--info-line);
  border-radius: 3px;
  background: var(--info-bg);
  white-space: pre-wrap;
  font-size: 13px;
}
.status[data-kind] { display: block; }
.status[data-kind="warning"] { border-color: var(--warn-line); background: var(--warn-bg); }
.status[data-kind="error"]   { border-color: var(--error-line); background: var(--error-bg); }
.status__title { display: block; font-weight: 600; margin-bottom: 2px; }
.status__link { display: inline-block; margin-top: 8px; color: var(--accent); }

.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.about { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; color: var(--muted); }
.about summary { cursor: pointer; font-weight: 600; color: var(--fg); }
.about p, .about ul { margin: 10px 0; }
.about ul { padding-left: 18px; }
.about li { margin-bottom: 4px; }

code {
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--code-bg);
  font-family: Consolas, "SF Mono", monospace;
  font-size: .92em;
}