:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 1rem; }
main { max-width: 60rem; margin: 0 auto; }
main.narrow { max-width: 22rem; }
header { display: flex; justify-content: space-between; align-items: center; }
table { border-collapse: collapse; width: 100%; margin-bottom: 1.5rem; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid #8884; }
label { display: block; margin-bottom: .8rem; }
input { display: block; width: 100%; padding: .4rem; box-sizing: border-box; }
button { padding: .4rem .9rem; }
.error { color: #c0392b; font-weight: 600; }
.muted { opacity: .7; }
header nav { display: flex; gap: .4rem; }
header nav a, .periods a { padding: .25rem .6rem; border-radius: .4rem; text-decoration: none; color: inherit; border: 1px solid #8884; }
header nav a.active, .periods a.active { background: #2a7de122; border-color: #2a7de1; font-weight: 600; }
.periods { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chart { position: relative; height: 22rem; margin-bottom: .5rem; }
.big { font-size: 1.15rem; }
.alerts { border: 1px solid #c0392b; border-radius: .5rem; padding: .2rem 1rem; margin-bottom: 1rem; }
.alerts ul { margin: .3rem 0 .8rem; padding-left: 1.2rem; }