: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; overflow: hidden; background: #101112; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
button, input, select { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }
.screen { width: min(100% - 32px, 520px); margin: auto; padding: 18px 0 calc(12px + env(safe-area-inset-bottom)); }
.app-screen { position: fixed; inset: 0; height: auto; display: flex; flex-direction: column; overflow: hidden; }
.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; flex: 0 0 auto; 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; }
.top h1 { flex: 0 1 auto; max-width: 58%; }
.progress-wrap { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 68px; }
.progress-track { position: relative; height: 10px; flex: 1 1 auto; min-width: 24px; overflow: hidden; border-radius: 999px; background: #292b2d; }
.progress-segments { position: absolute; inset: 0; display: flex; }
.progress-segment + .progress-segment { border-left: 1px solid #101112; }
.progress-cover { position: absolute; inset: 0 0 0 auto; background: #292b2d; transition: width .65s cubic-bezier(.2,.75,.25,1); }
.progress-count { color: #a9adb0; font-size: .65rem; white-space: nowrap; }
.actions { display: flex; align-items: center; gap: 12px; }
.reset, .delete, .notify, .settings-button { background: transparent; color: #a9adb0; font-size: .9rem; padding: 8px 0; white-space: nowrap; }
.notify { color: #8ccf4d; }
.delete { color: #f18484; }
.settings-button { color: #8ccf4d; width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; padding: 0; line-height: 1; font-size: 1.3rem; }
.brand-todo { display: inline-flex; width: 1.7em; height: 1em; align-items: center; gap: 0.25em; color: #72e6a3; vertical-align: -0.08em; }
.brand-todo-check { font-size: 0.95em; font-weight: 800; line-height: 1; }
.brand-todo-line { display: block; width: 0.95em; height: 0.16em; border-radius: 1em; background: currentColor; }
.setting-label { display: block; margin: 16px 0 8px; color: #a9adb0; }
.language-select { width: 100%; border: 1px solid #343638; border-radius: 12px; background: #191b1d; color: #f1f1f1; padding: 14px 15px; }
.row-size { width: 100%; accent-color: #8ccf4d; }
#row-height-value { float: right; color: #a9adb0; }
.color-select { width: 100%; height: 48px; padding: 5px; border: 1px solid #343638; border-radius: 12px; background: #191b1d; }
.settings-actions { display: grid; gap: 8px; margin-top: 20px; }
.settings-actions button, .switch-row { text-align: left; border-bottom: 1px solid #292b2d; }
.setting-action { width: 100%; min-height: 56px; text-align: left; border-bottom: 1px solid #292b2d; background: transparent; color: #f1f1f1; }
.leave-group-action { color: #f18484; }
.switch-group-form { display: grid; gap: 8px; padding: 8px 0 16px; }
.settings-panel { margin-top: auto; padding-bottom: 8px; }
.settings-screen .top h1 { max-width: 100%; white-space: normal; }
.switch-row { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #f1f1f1; cursor: pointer; }
.switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: relative; width: 48px; height: 28px; flex: 0 0 48px; border-radius: 999px; background: #45494c; transition: background .18s ease; }
.switch-track::after { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; border-radius: 50%; background: #f1f1f1; transition: transform .18s ease; }
.switch-input:checked + .switch-track { background: #8ccf4d; }
.switch-input:checked + .switch-track::after { transform: translateX(20px); background: #101112; }
.switch-input:focus-visible + .switch-track { outline: 2px solid #f1f1f1; outline-offset: 2px; }
.bottom-bar { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding-top: 10px; border-top: 0; }
.add { display: flex; flex: 1; min-width: 0; gap: 8px; margin: 0; }
.add input { min-width: 0; }
.add input { height: 48px; }
.sort-button { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 12px; background: #8ccf4d; color: #101112; font-size: 1.15rem; font-weight: 750; }
.sort-status-dot, .sort-color-dot { width: 18px; height: 18px; display: block; border-radius: 50%; }
.sort-status-dot { border: 2px solid #666b6e; background: transparent; }
.sort-color-dot { border: 2px solid #101112; }
.list { display: grid; align-content: start; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior-y: contain; padding-bottom: 12px; }
.grocery { position: relative; overflow: hidden; width: 100%; min-height: var(--grocery-row-height, 56px); display: flex; align-items: center; gap: 12px; text-align: left; border-radius: 12px; padding: 4px 15px; background: #191b1d; color: #f1f1f1; touch-action: pan-y; transition: transform .14s ease-out, background-color .14s ease-out; }
.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: var(--item-color, #8ccf4d); background: var(--item-color, #8ccf4d); box-shadow: inset 0 0 0 4px #191b1d; }
.confetti { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.confetti i { position: absolute; left: 26px; top: 50%; width: 5px; height: 8px; border-radius: 1px; background: var(--confetti-color, #8ccf4d); animation: confetti-pop .58s ease-out both; }
.confetti i:nth-child(1) { --x: -20px; --y: -22px; --confetti-color: #8ccf4d; }
.confetti i:nth-child(2) { --x: 3px; --y: -28px; --confetti-color: #f5c451; animation-delay: .02s; }
.confetti i:nth-child(3) { --x: 24px; --y: -18px; --confetti-color: #7ec8e3; animation-delay: .04s; }
.confetti i:nth-child(4) { --x: -18px; --y: 19px; --confetti-color: #e98ab2; animation-delay: .01s; }
.confetti i:nth-child(5) { --x: 7px; --y: 25px; --confetti-color: #b49ae8; animation-delay: .03s; }
.confetti i:nth-child(6) { --x: 29px; --y: 16px; --confetti-color: #8ccf4d; animation-delay: .05s; }
@keyframes confetti-pop { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(180deg); } }
.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; } }