html { background: var(--bg); }
body { margin: 0; min-height: 100vh; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.search { flex: 1 1 220px; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; }
.search::placeholder { color: var(--muted); }
.updated { font-size: 12px; color: var(--muted); }

.badge { position: relative; overflow: hidden; }
.badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 2px; }

.more { display: block; margin: 8px auto 0; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; }
.more:hover { border-color: var(--accent); }
.err { padding: 24px 16px; text-align: center; border: 1px dashed var(--live); border-radius: 12px; color: var(--fg); }
.err button { margin-top: 10px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; }
.loading { padding: 28px 16px; text-align: center; color: var(--muted); }