:root {
  --bg: #f3f0e8;
  --ink: #1c1a16;
  --muted: #5c574e;
  --line: #cfc7b6;
  --panel: #fffdf8;
  --accent: #0f5c4c;
  --accent-ink: #f4fff9;
  --warn: #8a4b12;
  --danger: #7a1f1f;
  --radius: 10px;
  --font: "Segoe UI", "IBM Plex Sans", sans-serif;
  --mono: "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 10% -10%, #e7efe8 0%, transparent 55%),
    radial-gradient(900px 400px at 100% 0%, #efe4d4 0%, transparent 50%),
    var(--bg);
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px; }
header.app {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
header.app h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
nav { display: flex; gap: 14px; flex-wrap: wrap; }
nav a { font-weight: 600; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: 0 1px 0 rgba(28,26,22,.04);
}
.card h2 { margin: 0 0 6px; font-size: 1.05rem; }
.card .count { font-size: 2rem; font-weight: 700; color: var(--accent); }
.meta { color: var(--muted); font-size: .92rem; margin: 8px 0 18px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.btn, button, .chip {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); padding: 8px 12px; font: inherit; cursor: pointer;
}
.btn.primary, button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--danger); border-color: #e0b4b4; }
.chip { background: #ece7db; font-size: .85rem; }
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #efe9dc; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
.badge { font-size: .75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.badge.ok { background: #e5f4ee; color: var(--accent); }
.badge.frozen { background: #f7ebe0; color: var(--warn); }
.badge.stale { background: #f7ebe0; color: var(--warn); }
.badge.broken { background: #f8e8e8; color: var(--danger); border-color: #e3bcbc; }
.badge.link-type { background: #ece7db; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.badge.link-badge { background: #e5f4ee; color: var(--accent); font-weight: 600; }

section#trace { margin-top: 24px; }
section#trace h3 { margin: 0 0 8px; font-size: 1rem; }
.trace-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trace-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

pre.content, textarea {
  width: 100%; min-height: 320px; font-family: var(--mono); font-size: .9rem;
  line-height: 1.45; background: #1e1c18; color: #f4efe4; border-radius: var(--radius);
  border: 1px solid #2d2a24; padding: 14px; white-space: pre-wrap; overflow: auto;
}
textarea { resize: vertical; }
label { display: block; font-weight: 600; margin: 12px 0 6px; }
input[type=text], select {
  width: 100%; max-width: 480px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); font: inherit;
}
.form-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.error {
  background: #f8e8e8; color: var(--danger); border: 1px solid #e3bcbc;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 12px;
}
.note { color: var(--muted); font-size: .9rem; }
footer { margin-top: 36px; color: var(--muted); font-size: .85rem; }

#purge-all-form { position: fixed; top: 14px; right: 14px; z-index: 1000; margin: 0; }
.purge-all-btn {
  display: none; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--danger); color: #fff; border: 1px solid #5a1414;
  border-radius: 8px; padding: 10px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.purge-all-btn.visible { display: inline-block; }
.purge-all-btn:hover { background: #931f1f; }