.app{width:100%;height:100%;margin:0;padding:18px;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;background-color:#fff;border-radius:0;box-shadow:none;overflow:hidden}h1{text-align:center;color:#1d1d1f;font-size:24px;font-weight:600;margin:6px 0 16px;letter-spacing:-.5px}.add-todo{display:flex;margin-bottom:14px;gap:12px}.add-todo input{flex:1;padding:14px 16px;border:1px solid #d1d1d6;border-radius:12px;font-size:16px;background-color:#f5f5f7;transition:all .2s ease;outline:none}.add-todo input:focus{border-color:#007aff;background-color:#fff;box-shadow:0 0 0 3px #007aff1a}.add-todo button{padding:14px 24px;background-color:#007aff;color:#fff;border:none;border-radius:12px;cursor:pointer;font-size:16px;font-weight:500;transition:all .2s ease}.add-todo button:hover{background-color:#0056cc;transform:translateY(-1px)}.add-todo button:active{transform:translateY(0)}.todo-list{list-style:none;padding:0 4px 0 0;margin:0;flex:1;overflow-y:auto;min-height:0}.todo-list::-webkit-scrollbar{width:8px}.todo-list::-webkit-scrollbar-thumb{background:#78788052;border-radius:999px}.todo-list::-webkit-scrollbar-track{background:transparent}.todo-item{display:flex;align-items:center;width:100%;padding:14px 16px;margin-bottom:8px;background-color:#fff;border:1px solid #e5e5e7;border-radius:12px;transition:all .2s ease;position:relative}.todo-item:hover{border-color:#d1d1d6;box-shadow:0 2px 8px #0000000f}.todo-item.completed{background-color:#f5f5f7;border-color:#e5e5e7}.todo-item.completed span{text-decoration:line-through;color:#86868b}.todo-item input[type=checkbox]{margin-right:16px;width:20px;height:20px;accent-color:#007aff;cursor:pointer}.todo-item span{flex:1;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:16px;color:#1d1d1f;transition:color .2s ease}.todo-item span:hover{color:#007aff}.todo-item button{padding:6px 12px;background-color:#ff3b30;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;margin-left:12px;opacity:0;transition:all .2s ease;transform:scale(.9)}.todo-item:hover button{opacity:1;transform:scale(1)}.todo-item button:hover{background-color:#d63027}.edit-container{flex:1;display:flex;align-items:center;gap:8px}.edit-container input{flex:1;padding:8px 12px;border:1px solid #007aff;border-radius:8px;font-size:16px;background-color:#fff;outline:none}.edit-container button{padding:8px 16px;background-color:#34c759;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.edit-container button:hover{background-color:#28a745}.edit-container button:last-child{background-color:#86868b}.todo-actions{display:flex;gap:8px;align-items:center}.add-subtask-btn{padding:4px 8px;background-color:#007aff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;opacity:0;transition:all .2s ease;transform:scale(.9)}.todo-item:hover .add-subtask-btn{opacity:1;transform:scale(1)}.add-subtask-btn:hover{background-color:#0056cc}.add-subtask{display:flex;align-items:center;width:100%;padding:12px 14px;margin-bottom:8px;background-color:#f5f5f7;border:1px solid #e5e5e7;border-radius:12px;gap:8px}.add-subtask input{flex:1;padding:8px 12px;border:1px solid #d1d1d6;border-radius:8px;font-size:14px;background-color:#fff;outline:none}.add-subtask input:focus{border-color:#007aff;box-shadow:0 0 0 2px #007aff1a}.add-subtask button{padding:8px 16px;background-color:#34c759;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.add-subtask button:hover{background-color:#28a745}.add-subtask button:last-child{background-color:#86868b}.add-subtask button:last-child:hover{background-color:#6c6c70}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{min-width:320px;background:linear-gradient(180deg,#f6f7fb,#eceff5)}