:root {
  --ink: #23201c; --paper: #faf8f4; --card: #ffffff; --line: #e6e1d8;
  --accent: #7a5c3e; --accent-dark: #5d4630; --pass: #2e7d4f; --fail: #b03a2e;
  --muted: #7d766c;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.55 Georgia, 'Times New Roman', serif;
}
.topbar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 28px; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand a { font-size: 1.25rem; font-weight: bold; color: var(--ink); text-decoration: none; }
.brand .org { margin-left: 10px; color: var(--muted); font-style: italic; font-size: .95rem; }
nav a { margin-left: 18px; color: var(--accent-dark); text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav .who { margin-left: 18px; color: var(--muted); }
main { max-width: 980px; margin: 28px auto; padding: 0 20px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 24px 28px; margin-bottom: 22px;
}
.card.narrow { max-width: 430px; margin: 60px auto; }
.card.center { text-align: center; }
h1 { font-size: 1.5rem; margin: 0 0 10px; }
h2 { font-size: 1.15rem; margin: 4px 0 12px; }
h3 { font-size: 1rem; }
h3.fail { color: var(--fail); }
.lede { color: var(--muted); margin-top: 0; }
label { display: block; margin: 14px 0 4px; font-weight: bold; font-size: .95rem; }
input, select, textarea {
  width: 100%; padding: 9px 10px; margin-top: 5px; font: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: #fffdf9;
}
button {
  margin-top: 18px; padding: 11px 22px; font: inherit; font-weight: bold;
  color: #fff; background: var(--accent); border: 0; border-radius: 6px; cursor: pointer;
}
button:hover { background: var(--accent-dark); }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tr.total td { border-top: 2px solid var(--ink); }
.pass { color: var(--pass); font-weight: bold; }
.fail { color: var(--fail); font-weight: bold; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.excerpt { font-style: italic; color: #4d463d; }
.flash {
  background: #fdf0ee; border: 1px solid #eecfca; color: var(--fail);
  padding: 10px 14px; border-radius: 6px; margin-bottom: 16px;
}
.report-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.scorebox { text-align: center; padding: 14px 26px; border-radius: 10px; border: 2px solid; min-width: 210px; }
.scorebox.pass { border-color: var(--pass); }
.scorebox.fail { border-color: var(--fail); }
.scorebox .score { font-size: 2.4rem; font-weight: bold; }
.scorebox.pass .score, .scorebox.pass .verdict { color: var(--pass); }
.scorebox.fail .score, .scorebox.fail .verdict { color: var(--fail); }
ul.issues { padding-left: 20px; }
ul.issues li { margin-bottom: 12px; }
.spinner {
  width: 44px; height: 44px; margin: 18px auto; border-radius: 50%;
  border: 4px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 24px; }
.upload-form { max-width: 560px; }
.tile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px; margin-bottom: 22px;
}
.tile {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 20px 22px; color: var(--ink); text-decoration: none;
}
.tile h2 { margin: 8px 0 8px; font-size: 1.1rem; }
.tile p { margin: 0; color: var(--muted); font-size: .93rem; }
.tile.active { border-color: var(--accent); box-shadow: 0 1px 6px rgba(122, 92, 62, .18); }
.tile.active:hover { background: #fdfaf5; box-shadow: 0 2px 10px rgba(122, 92, 62, .28); }
.tile.soon { opacity: .62; }
.tile-status {
  display: inline-block; font-size: .72rem; font-weight: bold; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}
.tile-status.live { color: var(--pass); border-color: var(--pass); }
.dl-btn {
  display: inline-block; padding: 9px 16px; background: var(--accent);
  color: #fff; border-radius: 6px; text-decoration: none; font-weight: bold;
}
.dl-btn:hover { background: var(--accent-dark); }