:root {
  color-scheme: light;
  --green: #176b4d;
  --green-dark: #0c4934;
  --gold: #d3a73b;
  --paper: #f4f7f2;
  --ink: #183029;
  --muted: #62736d;
  --card: #ffffff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.shell { width: min(100% - 24px, 720px); margin: 0 auto; padding: 22px 0 40px; }
.hero { background: linear-gradient(135deg, var(--green), var(--green-dark)); color: white; padding: 24px; border-radius: 22px; }
.hero h1 { margin: 0 0 6px; font-size: 1.65rem; }
.hero p { margin: 0; opacity: .86; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.card { background: var(--card); border: 1px solid #dfe8e3; border-radius: 18px; padding: 17px; box-shadow: 0 5px 18px rgb(21 69 51 / 7%); }
.card.full { grid-column: 1 / -1; }
.card h2, .card h3 { margin: 0 0 8px; }
.card h2 { font-size: 1.05rem; }
.card h3 { font-size: 1rem; }
.metric { display: block; color: var(--green); font-size: 1.8rem; font-weight: 750; }
.muted, .status { color: var(--muted); font-size: .9rem; }
.actions { display: grid; gap: 10px; margin-top: 14px; }
button, .button {
  display: block; width: 100%; border: 0; border-radius: 13px; padding: 13px 15px;
  background: var(--green); color: white; font: inherit; font-weight: 700;
  text-align: center; text-decoration: none; cursor: pointer;
}
.button.secondary, button.secondary { background: #e5eee9; color: var(--green-dark); }
.preferences .card { min-height: 105px; border-top: 4px solid var(--gold); }
.nav-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) {
  .grid, .nav-list { grid-template-columns: 1fr; }
  .card.full { grid-column: auto; }
}

.official-daily {
  margin: 18px 0;
}

.official-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
}

.official-heading span {
  color: rgba(255,255,255,.72);
  font-size: .9rem;
}

.official-heading strong {
  font-size: 1.15rem;
}

.official-card {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.14);
}

.official-type {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: .85rem;
  margin-bottom: 10px;
}

.official-body {
  white-space: pre-wrap;
  line-height: 2;
  font-size: 1.05rem;
}

.official-reference {
  margin-top: 12px;
  font-weight: 700;
  opacity: .86;
}