:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f3f6ef; color: #1d3324; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
.container { width: min(100% - 2rem, 860px); margin: 0 auto; padding: 3rem 0 4rem; }
header { margin-bottom: 2rem; }
.eyebrow { margin: 0; color: #46724e; font-size: .8rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: .15rem 0 .35rem; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1; }
h2 { font-size: .92rem; margin: 0; color: #4c6152; font-weight: 650; }
.status { margin: 0; color: #5f6c62; }.status.ok { color: #36713c; }.status.error, .failure { color: #a52d2d; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.metrics article, .history, .actions { background: #fff; border: 1px solid #dce5d9; border-radius: 14px; box-shadow: 0 2px 8px #2133250c; }
.metrics article { padding: 1rem; min-height: 128px; }.metrics p { margin: 1rem 0 0; font-size: 1.65rem; font-weight: 750; white-space: nowrap; }.metrics span { font-size: .72rem; font-weight: 700; color: #617064; }
.actions { margin-top: 1rem; padding: 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }.actions p { width: 100%; margin: 0; min-height: 1.2rem; }
button { border: 0; border-radius: 8px; padding: .68rem 1rem; background: #276234; color: white; font-weight: 700; } button:hover { background: #194a24; } button.secondary { background: #e7eee5; color: #24412b; } button.secondary:hover { background: #d4e1d1; }
.history { margin-top: 1rem; padding: 1.2rem; }.section-title { display: flex; justify-content: space-between; align-items: center; }.link-button { padding: .25rem .45rem; background: transparent; color: #276234; }.link-button:hover { background: #eef4ed; }
#history-empty { color: #66736a; } #history-list { margin: 1rem 0 0; padding: 0; list-style: none; } #history-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid #e4ebe1; font-size: .92rem; } time { color: #657069; white-space: nowrap; }
.success { color: #36713c; }
@media (max-width: 700px) { .metrics { grid-template-columns: repeat(2, 1fr); } .container { padding-top: 2rem; } }
@media (max-width: 440px) { .metrics { grid-template-columns: 1fr; } #history-list li { display: block; } time { display: block; margin-top: .25rem; } }