* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 1rem; background: #f6f7f4; color: #222; }
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
h1 { margin: .2rem 0; }
.controls { display: flex; gap: .5rem; align-items: center; }
#settings { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin: 1rem 0; }
#settingsForm { display: grid; gap: .6rem; max-width: 22rem; }
#latest { display: flex; gap: 1rem; flex-wrap: wrap; }
#latest figure { margin: 0; }
#latest img { width: min(90vw, 480px); border-radius: 8px; display: block; }
#history { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
#history img { width: 100%; border-radius: 6px; display: block; }
.day-label { grid-column: 1 / -1; font-weight: 600; margin-top: .8rem; }
figcaption { font-size: .8rem; color: #555; }
.status { font-size: .85rem; color: #2a7; }
.status.offline { color: #c44; }
button { cursor: pointer; padding: .4rem .7rem; border-radius: 6px; border: 1px solid #bbb; background: #fff; }