:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #101112; color: #f1f1f1; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: #101112; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
.screen { width: min(100% - 32px, 520px); margin: auto; padding: 18px 0 calc(24px + env(safe-area-inset-bottom)); }
.join { min-height: 100dvh; display: grid; place-content: center; gap: 12px; }
.join h1 { font-size: 2rem; margin: 0 0 12px; text-align: center; }
.field, .add input { width: 100%; border: 1px solid #343638; border-radius: 12px; background: #191b1d; color: #f1f1f1; padding: 14px 15px; outline: none; }
.field:focus, .add input:focus { border-color: #8ccf4d; }
.primary { width: 100%; padding: 14px; border-radius: 12px; background: #8ccf4d; color: #101112; font-weight: 750; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; }
.top h1 { margin: 0; font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { display: flex; align-items: center; gap: 12px; }
.reset, .delete, .notify { background: transparent; color: #a9adb0; font-size: .9rem; padding: 8px 0; white-space: nowrap; }
.notify { color: #8ccf4d; }
.delete { color: #f18484; }
.add { display: flex; gap: 8px; margin-bottom: 16px; }
.add input { min-width: 0; }
.add button { width: 48px; border-radius: 12px; background: #8ccf4d; color: #101112; font-size: 1.5rem; }
.list { display: grid; gap: 8px; }
.grocery { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border-radius: 12px; padding: 15px; background: #191b1d; color: #f1f1f1; }
.check { width: 22px; height: 22px; border: 2px solid #666b6e; border-radius: 50%; flex: 0 0 22px; }
.grocery.completed { color: #7f8588; text-decoration: line-through; }
.grocery.completed .check { border-color: #8ccf4d; background: #8ccf4d; box-shadow: inset 0 0 0 4px #191b1d; }
.grocery.selected { outline: 2px solid #f18484; outline-offset: 1px; }
.empty { color: #777d80; text-align: center; padding: 42px 0; }
.error { color: #f18484; min-height: 1.2em; text-align: center; }
@media (min-width: 560px) { .screen { padding-top: 38px; } }