@charset "UTF-8";body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.6;margin:0;padding:0;background:#f5f7fa;color:#2c3e50}main{max-width:1200px;margin:0 auto;padding:1rem;box-sizing:border-box}h1{text-align:center;margin-bottom:3rem;color:#2c3e50;font-size:2.5rem;font-weight:700;position:relative}h1:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:100px;height:4px;background:linear-gradient(135deg,#3498db,#2980b9);border-radius:2px}.todo-form{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 10px 15px #0000001a;margin-bottom:3rem;transition:transform .3s;width:100%;box-sizing:border-box}.todo-form:hover{transform:translateY(-5px)}.todo-form .form-group{margin-bottom:1.5rem}.todo-form .form-group label{display:block;margin-bottom:.5rem;color:#2c3e50;font-weight:600;font-size:1.1rem}.todo-form .form-group input,.todo-form .form-group textarea{width:100%;padding:.8rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all .3s;background:#f8f9fa}.todo-form .form-group input:focus,.todo-form .form-group textarea:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db33;background:#fff}.todo-form .form-group textarea{height:120px;resize:vertical}.todo-form button{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;cursor:pointer;font-size:1.1rem;font-weight:600;transition:all .3s;box-shadow:0 2px 4px #0000001a}.todo-form button:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001a}.todo-form button:active{transform:translateY(0)}.todo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;padding:0;width:100%}.todo-card{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;cursor:pointer;transition:all .3s;border:1px solid rgba(0,0,0,.1);position:relative;overflow:hidden;margin:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}.todo-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(135deg,#3498db,#2980b9);opacity:0;transition:opacity .3s}.todo-card:hover{transform:translateY(-5px);box-shadow:0 10px 15px #0000001a}.todo-card:hover:before{opacity:1}.todo-card h3{margin:0 0 1rem;color:#2c3e50;font-size:1.3rem;font-weight:600}.todo-card .description{color:#7f8c8d;margin-bottom:1rem;line-height:1.6}.todo-card .date{color:#7f8c8d;font-size:.9rem;margin:0;display:flex;align-items:center}.todo-card .date:before{content:"📅";margin-right:.5rem}.todo-card.completed{background:#fffc}.todo-card.completed .todo-content{opacity:.7}.todo-card.completed h3{text-decoration:line-through;color:#7f8c8d}.todo-card.completed .description{text-decoration:line-through}.todo-card.completed .toggle-btn{background:#2ecc71;color:#fff;border-color:#2ecc71}.todo-card .todo-content{flex:1}.todo-card .toggle-btn{margin-top:1rem;padding:.8rem 1.5rem;border:2px solid #2ecc71;background:transparent;color:#2ecc71;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s;width:100%;z-index:1;display:block!important;opacity:1!important}.todo-card .toggle-btn:hover{background:#2ecc71;color:#fff;transform:translateY(-2px)}.todo-card .toggle-btn:active{transform:translateY(0)}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;backdrop-filter:blur(5px);z-index:1000;animation:fadeIn .3s ease}.modal .modal-content{background:#fff;margin:5% auto;padding:2rem;width:90%;max-width:600px;border-radius:15px;position:relative;box-shadow:0 10px 15px #0000001a;animation:slideIn .3s ease}.modal .modal-content .close{position:absolute;right:1.5rem;top:1.5rem;font-size:1.8rem;cursor:pointer;color:#7f8c8d;transition:color .3s;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.modal .modal-content .close:hover{color:#e74c3c;background:#e74c3c1a}.modal .modal-content h2{color:#2c3e50;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #eee}.modal .modal-content p{color:#7f8c8d;line-height:1.8;margin-bottom:2rem}.modal .modal-content .modal-actions{display:flex;gap:1rem;justify-content:flex-end}.modal .modal-content .modal-actions button{padding:.8rem 1.5rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s}.modal .modal-content .modal-actions button.edit-btn{background:#2ecc71;color:#fff}.modal .modal-content .modal-actions button.edit-btn:hover{background:#25a25a;transform:translateY(-2px)}.modal .modal-content .modal-actions button.delete-btn{background:#e74c3c;color:#fff}.modal .modal-content .modal-actions button.delete-btn:hover{background:#d62c1a;transform:translateY(-2px)}.modal .modal-content .edit-title{width:100%;font-size:1.5rem;padding:.5rem;margin-bottom:1rem;border:2px solid #eee;border-radius:8px}.modal .modal-content .edit-title:focus{outline:none;border-color:#3498db}.modal .modal-content .edit-description{width:100%;min-height:100px;padding:.5rem;margin-bottom:1rem;border:2px solid #eee;border-radius:8px;font-family:inherit;resize:vertical}.modal .modal-content .edit-description:focus{outline:none;border-color:#3498db}.modal .modal-content .save-btn{background:#3498db;color:#fff;padding:.8rem 1.5rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s}.modal .modal-content .save-btn:hover{background:#217dbb;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 768px){main{padding:1rem}.todo-form{padding:1.5rem}.todo-list{grid-template-columns:1fr;gap:1rem}.todo-card{margin:0}.modal .modal-content{margin:10% auto;width:95%;padding:1.5rem}}