:root {
  color-scheme: light dark;
  --line: color-mix(in srgb, currentColor 15%, transparent);
  --muted: color-mix(in srgb, currentColor 60%, transparent);
  --accent: #1a73e8;
}
body { width: 440px; margin: 0; font: 13px/1.4 system-ui, sans-serif; }
header, footer { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
header { justify-content: space-between; border-bottom: 1px solid var(--line); }
footer { border-top: 1px solid var(--line); }
footer button:last-child { margin-left: auto; }
button { padding: 5px 10px; font: inherit; }
#status { margin: 0; padding: 8px 12px; color: var(--muted); }
#status.warn { color: #d93025; }
#list { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
#list li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
#list img { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: var(--line); }
#list a { color: inherit; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
#list a:hover { text-decoration: underline; }
.meta { margin-top: 2px; color: var(--muted); }
.badge { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11px; }
.empty { padding: 24px 12px; text-align: center; color: var(--muted); }