:root { color-scheme: light; font: 16px system-ui, sans-serif; color: #163731; background: #edf4ef; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { background: #173b36; color: #f1faf4; padding: 1rem max(1rem, calc((100vw - 56rem) / 2)); }
h1 { margin: 0; font-size: 1.65rem; white-space: nowrap; }
h2, h3 { margin: 0 0 .8rem; }
main { max-width: 58rem; margin: auto; padding: 1rem; }
section, #login { background: #fffdf8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
form { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; }
label { display: grid; gap: .25rem; max-width: 100%; }
input, select, textarea, button { font: inherit; padding: .6rem; min-height: 44px; border-radius: .5rem; border: 1px solid #728780; }
input, select, textarea { width: min(100%, 15rem); color: inherit; background: white; }
button { cursor: pointer; color: white; background: #245b51; }
button:disabled { opacity: .5; }
article { border-top: 1px solid #d7e4d9; margin-top: .8rem; padding-top: .8rem; }
article button { margin-right: .4rem; }
#notice:not(:empty) { padding: .7rem; margin-bottom: .7rem; background: #faefd6; border-radius: .6rem; }
#report strong { font-size: 1.6rem; }
.day { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: .5rem; margin: .35rem 0; }
meter { width: 100%; }