.app{max-width:600px;margin:2rem auto;padding:0 1rem}header{text-align:center;margin-bottom:2rem}header h1{margin-bottom:.5rem;font-size:1.5rem}.client-info{color:#666;justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.client-info .dot{border-radius:50%;width:10px;height:10px;display:inline-block}.client-info .hint{color:#999;font-style:italic}.add-todo{gap:.5rem;margin-bottom:1rem;display:flex}.add-todo input{border:1px solid #ddd;border-radius:6px;flex:1;padding:.5rem .75rem;font-size:1rem}.add-todo input:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 2px #3498db33}.add-todo button{color:#fff;cursor:pointer;background:#3498db;border:none;border-radius:6px;padding:.5rem 1.25rem;font-size:1rem}.add-todo button:hover{background:#2980b9}.filter-bar{color:#888;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding:.5rem 0;font-size:.875rem;display:flex}.filter-bar .filters{gap:.25rem;display:flex}.filter-bar button{cursor:pointer;color:#666;text-transform:capitalize;background:0 0;border:1px solid #0000;border-radius:4px;padding:.25rem .5rem;font-size:.8rem}.filter-bar button.active{color:#3498db;border-color:#3498db}.filter-bar .clear{color:#e74c3c}.filter-bar .clear:hover{border-color:#e74c3c}.todo-list{list-style:none}.todo-list li{background:#fff;border-radius:6px;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.75rem;transition:opacity .2s;display:flex;box-shadow:0 1px 3px #0000000d}.todo-list li.completed .title{color:#aaa;text-decoration:line-through}.todo-list li label{cursor:pointer;flex:1;align-items:center;gap:.5rem;display:flex}.todo-list li .meta{color:#aaa;white-space:nowrap;font-size:.75rem}.todo-list li .delete{color:#ccc;cursor:pointer;background:0 0;border:none;padding:0 .25rem;font-size:1.25rem;line-height:1}.todo-list li .delete:hover{color:#e74c3c}.status{text-align:center;color:#888;padding:1rem}.status.error{color:#e74c3c}.empty{text-align:center;color:#aaa;padding:2rem}footer{text-align:center;color:#aaa;border-top:1px solid #eee;margin-top:2rem;padding-top:1rem;font-size:.8rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#f5f5f5;font-family:system-ui,-apple-system,sans-serif;line-height:1.5}
