:root {
  --aya-bg: #f3f5f8;
  --aya-bg-elev: #ffffff;
  --aya-text: #15202b;
  --aya-text-muted: #5b6b7c;
  --aya-border: #d5dde7;
  --aya-accent: #0f6e56;
  --aya-accent-soft: #d8f0e8;
  --aya-ok: #027a48;
  --aya-danger: #b42318;
  --aya-font: "Segoe UI", "IBM Plex Sans", "Source Sans 3", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--aya-font);
  color: var(--aya-text);
  background:
    linear-gradient(180deg, #d8f0e8 0%, transparent 28%),
    var(--aya-bg);
  min-height: 100vh;
}
.wrap { padding: 1.5rem; max-width: 720px; }
.eyebrow {
  margin: 0;
  color: var(--aya-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
h1 { margin: 0.35rem 0 0.75rem; font-size: 1.375rem; letter-spacing: -0.02em; }
.status { color: var(--aya-text-muted); margin: 0; }
.status.ok { color: var(--aya-ok); }
.status.err { color: var(--aya-danger); }
.content {
  margin-top: 1.25rem;
  background: var(--aya-bg-elev);
  border: 1px solid var(--aya-border);
  border-radius: 8px;
  padding: 1rem;
}
.hidden { display: none !important; }
ul { margin: 0.75rem 0 0; padding-left: 1.1rem; }
li { margin: 0.35rem 0; }
.meta {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--aya-text-muted);
  background: var(--aya-accent-soft);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
}