:root { font-family: system-ui, sans-serif; color: #172033; background: #f3f5f9; color-scheme: light; }
body { margin: 0; padding: 2rem 1rem; }
main { max-width: 42rem; margin: auto; padding: 1.5rem; background: #fff; border-radius: .75rem; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.1rem; }
p { line-height: 1.6; }
label { display: block; font-weight: 600; margin-bottom: .5rem; }
input { box-sizing: border-box; width: 100%; padding: .7rem; border: 1px solid #6b7280; border-radius: .25rem; font: inherit; }
#token-help { color: #4b5563; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
button { padding: .65rem 1rem; font: inherit; border: 0; border-radius: .25rem; background: #1747a6; color: #fff; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 3px solid #d97706; outline-offset: 3px; }
#connection-status { font-weight: 600; }
#sensor-results[hidden] { display: none; }
#sensor-source { font-weight: 600; }
.sensor-help, .sensor-time { color: #4b5563; font-size: .9rem; }
#sensor-readings { display: grid; gap: .75rem; }
#sensor-readings article { padding: .75rem 1rem; border: 1px solid #cbd5e1; border-radius: .25rem; overflow-wrap: anywhere; }
#sensor-readings h3 { margin: 0; font-size: 1rem; }
#sensor-readings p { margin: .5rem 0 0; }
.sensor-error { color: #9f1239; font-weight: 600; }
#todo-section { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid #cbd5e1; }
#todo-results[hidden], #todo-empty[hidden] { display: none; }
#todo-status, #todo-source { font-weight: 600; }
.todo-help, .todo-time { color: #4b5563; font-size: .9rem; }
.todo-actions { margin-top: 1rem; }
#todo-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.todo-item { padding: 1rem; border: 1px solid #cbd5e1; border-radius: .25rem; overflow-wrap: anywhere; }
.todo-title { margin: 0; font-weight: 600; white-space: pre-wrap; }
.todo-item p { margin: 0 0 .5rem; }
.todo-item[data-completed="true"] .todo-title { text-decoration: line-through; }
.todo-complete { display: flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; }
.todo-complete input { width: auto; }
.todo-delete { background: #9f1239; }
pre { min-height: 4rem; padding: 1rem; background: #edf1f7; border-radius: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }