*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f5f5f5;justify-content:center;align-items:center;min-height:100vh;padding:15px;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif;display:flex}.container{width:100%;max-width:600px;margin:0 auto}fieldset{background-color:#fff;border:2px solid #333;border-radius:10px;padding:20px;box-shadow:0 4px 6px #0000001a}legend{background-color:#fff;border:2px solid #333;border-radius:8px;margin-bottom:10px;padding:8px 20px;font-size:clamp(20px,5vw,28px);font-weight:700}.add-task{flex-direction:row;gap:10px;width:100%;margin-bottom:15px;display:flex}.add-task input{border:2px solid #ddd;border-radius:8px;outline:none;flex:1;min-width:0;height:45px;padding:0 15px;font-size:16px;transition:border-color .3s}.add-task input:focus{border-color:#00f}.addBtn{color:#fff;cursor:pointer;white-space:nowrap;background-color:#00f;border:none;border-radius:8px;justify-content:center;align-items:center;gap:5px;min-width:80px;height:45px;padding:0 15px;font-size:16px;font-weight:700;transition:background-color .3s;display:inline-flex}.addBtn:hover{background-color:#4f4fc9}.errorText{color:red;text-align:center;background-color:#ffe6e6;border-radius:5px;margin:10px 0;padding:8px;font-size:14px;font-weight:700}.result-task{border-top:2px solid #ddd;margin-top:20px;padding-top:20px}ul{flex-direction:column;gap:12px;list-style:none;display:flex}li{background-color:#b6ced1;border-radius:8px;align-items:flex-start;gap:12px;width:100%;padding:15px;transition:transform .2s,box-shadow .2s;display:flex}li:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.task-content{flex:1;align-items:flex-start;gap:10px;min-width:0;display:flex}.task-content input[type=checkbox]{cursor:pointer;flex-shrink:0;width:20px;height:20px;margin-top:2px}.task-content span{word-break:break-word;white-space:pre-wrap;flex:1;font-size:16px;line-height:1.5}li input[type=text]{border:2px solid #00f;border-radius:5px;outline:none;flex:1;min-width:0;height:40px;padding:0 12px;font-size:16px}.btn-group{flex-shrink:0;gap:8px;display:flex}.btn-group button{cursor:pointer;white-space:nowrap;border:none;border-radius:5px;justify-content:center;align-items:center;gap:5px;min-width:70px;height:40px;padding:0 10px;font-size:14px;font-weight:700;transition:all .3s;display:inline-flex}.saveBtn{color:#fff;background-color:green}.saveBtn:hover{background-color:#2dcf2d}.cancelBtn{color:#fff;background-color:gray}.cancelBtn:hover{color:#000;background-color:#bbb8b8}.editBtn{color:#000;background-color:#ff0}.editBtn:hover{background-color:#e4e479}.deleteBtn{color:#fff;background-color:red}.deleteBtn:hover{background-color:#ec5858}@media screen and (width<=768px){body{padding:10px}fieldset{padding:15px}.add-task{flex-direction:column}.addBtn{width:100%}li{flex-direction:column;align-items:stretch}.task-content{margin-bottom:10px}.btn-group{justify-content:flex-end}li input[type=text]{width:100%;margin-bottom:10px}.btn-group button{flex:1}}@media screen and (width<=480px){fieldset{padding:12px}legend{padding:5px 15px;font-size:20px}.add-task input,.addBtn{height:40px;font-size:14px}li{padding:12px}.task-content{gap:8px}.task-content input[type=checkbox]{width:18px;height:18px}.task-content span{font-size:14px}.btn-group{flex-direction:column;gap:5px}.btn-group button{width:100%;height:35px;font-size:13px}.btn-group:has(button){flex-direction:row}.btn-group button svg{font-size:16px}}@media screen and (width<=320px){fieldset{padding:8px}legend{font-size:18px}.btn-group{flex-direction:column}.btn-group button{width:100%}}@media (hover:none) and (pointer:coarse){button,.btn-group button{min-height:44px}input[type=checkbox]{width:24px;height:24px}}@media screen and (height<=500px) and (orientation:landscape){body{align-items:flex-start;padding:20px}.container{max-width:800px}li{padding:10px}.btn-group button{height:35px}}