:root { --muted: #7a746a; }

body { font-size: 14px; }

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(244, 241, 234, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

h1 { font-size: 18px; margin: 0; white-space: nowrap; }

#stats, .muted { color: var(--muted); font-size: 13px; }

.back { margin-left: auto; color: var(--ink); font-size: 13px; }

#message { margin: 40px 16px; text-align: center; color: var(--muted); }

main { padding: 0 16px 40px; }

.tabs { display: flex; gap: 4px; margin: 12px 0; flex-wrap: wrap; }

.tabs button, .small {
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.tabs button.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.small:hover { background: var(--hover); }

.small.danger { color: var(--bad); }

.export { margin-left: auto; color: var(--ink); text-decoration: none; }

h2 { font-size: 15px; margin: 18px 0 6px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }

input, select, textarea {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

textarea { font-family: ui-monospace, Menlo, monospace; resize: vertical; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

.card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.art {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.art svg { width: 100%; height: 100%; display: block; }

.answer { font-size: 16px; font-weight: 700; text-align: center; }

.aliases { font-size: 12px; text-align: center; word-break: break-word; }

.meta { font-size: 11px; text-align: center; color: var(--muted); }

.actions { display: flex; gap: 6px; }

.actions button { flex: 1; }

.card form { display: flex; flex-direction: column; gap: 6px; }

table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: 12px; overflow: hidden; }

th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }

th { font-weight: 600; color: var(--muted); background: #faf7f0; }

.status { white-space: nowrap; }

.status.failed, .status.deleted { color: var(--bad); }

.status.ready { color: var(--good); }

.add-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }

.add-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

.add-form .art { width: 220px; }

.primary {
  align-self: flex-start;
  font-size: 14px;
  padding: 8px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
}

#toast {
  position: fixed;
  top: 54px;
  right: 16px;
  z-index: 30;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}

#toast.show { opacity: 1; }

@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  table { display: block; overflow-x: auto; }
}