:root { color-scheme: dark; font: 14px system-ui, sans-serif; color: #ddd; background: #181818; }
* { box-sizing: border-box; }
body { margin: 0; display: flex; min-height: 100vh; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: #303030; border: 1px solid #454545; border-radius: 3px; padding: 6px 10px; }
button:hover { background: #3a3a3a; }
button:disabled { opacity: .4; cursor: default; }
input { min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 6px; }
button:focus-visible, input:focus-visible { outline: 1px solid #aaa; outline-offset: 1px; }
.sidebar { width: 200px; flex-shrink: 0; padding: 12px; background: #202020; border-right: 1px solid #383838; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#lists { max-height: calc(100vh - 120px); overflow: auto; }
.list-link { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border-color: transparent; margin-bottom: 3px; padding: 7px 5px; }
.list-link.active { background: #373737; }
.list-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count { color: #aaa; font-size: 12px; }
.list-handle, .drag-handle { cursor: grab; touch-action: none; user-select: none; color: #aaa; }
#export { margin-top: 16px; background: none; border: 0; color: #aaa; padding: 4px 0; font-size: 12px; }
main { flex: 1; min-width: 0; padding: 16px 20px; }
.workspace { max-width: 760px; }
.title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
#list-title { width: 100%; font-size: 20px; font-weight: 600; padding: 4px 0; }
.icon-button, .remove { background: none; border: 0; color: #aaa; font-size: 20px; padding: 0 6px; }
#add-form { display: flex; gap: 6px; margin-bottom: 12px; }
#new-item { flex: 1; border-color: #454545; background: #222; }
.item { display: flex; align-items: center; gap: 8px; min-height: 38px; border-bottom: 1px solid #303030; }
.item:hover { background: #222; }
.drag-handle { background: none; border: 0; padding: 4px; font-size: 18px; }
.check { margin: 0; width: 15px; height: 15px; flex-shrink: 0; accent-color: #aaa; cursor: pointer; }
.item-color { width: 19px; height: 19px; flex-shrink: 0; padding: 1px; border: 1px solid #555; border-radius: 50%; background: transparent; cursor: pointer; }
.item-color::-webkit-color-swatch-wrapper { padding: 0; }
.item-color::-webkit-color-swatch { border: 0; border-radius: 50%; }
.item-text { flex: 1; width: 100%; }
.item-text { color: var(--item-color, #ddd); }
.done .item-text { opacity: .55; text-decoration: line-through; }
.dragging { opacity: .4; }
#empty { color: #999; padding: 12px 0; }
.list-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 12px; color: #999; }
#clear-completed { border: 0; background: none; padding: 0; font-size: 12px; }
#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #303030; border: 1px solid #555; padding: 8px 12px; border-radius: 4px; white-space: nowrap; }
#undo { margin-left: 12px; }
[hidden] { display: none !important; }
@media (max-width: 580px) {
body { display: block; }
.sidebar { width: 100%; border-right: 0; border-bottom: 1px solid #383838; padding: 10px 12px; }
.sidebar-heading { margin-bottom: 8px; }
#lists { display: flex; gap: 4px; overflow: auto; }
.list-link { width: auto; max-width: 200px; flex-shrink: 0; }
#export { margin-top: 6px; }
main { padding: 12px; }
}