*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}body{background-color:#f9f9f9;color:#333}.task-manager{padding:20px}button{margin:5px;padding:10px 20px;font-size:14px;border-radius:4px;cursor:pointer;transition:background-color .3s ease,transform .2s ease;border:1px solid transparent;outline:none}button:hover{opacity:.85;transform:scale(1.02)}button:focus{outline:none}.header{display:flex;justify-content:space-between;align-items:center;padding:20px;background-color:#333;color:#fff}.user-info ul{list-style-type:none;padding:0;display:flex}.user-info li{margin-left:20px}.user-info a{text-decoration:none;color:#fff;font-size:16px}.user-info a:hover{text-decoration:underline}.auth-container{background-color:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 12px #0000001a;max-width:400px;width:100%;margin:50px auto auto}.auth-container h2{font-size:2rem;text-align:center;margin-bottom:20px;color:#444}.auth-container form{display:flex;flex-direction:column}.auth-container form div{margin-bottom:15px}.auth-container form label{display:block;margin-bottom:.5em}.auth-container form input{padding:12px;font-size:16px;border:1px solid #ccc;border-radius:5px;margin-bottom:15px;width:100%;outline:none;transition:border-color .3s}.auth-container form input:focus{border-color:#333}.auth-container button{padding:12px;font-size:16px;background-color:#333;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s,transform .2s ease}.auth-container button:hover{background-color:#444}.auth-container .error{color:#d9534f;font-size:14px;margin-bottom:15px;text-align:center}.auth-container .signup-link{text-align:center;margin-top:1em}.auth-container .signup-link a{color:#333;text-decoration:underline}.auth-container .signup-link a:hover{color:#444}.task-bar{display:flex;justify-content:flex-end;width:100%;border-bottom:2px solid rgba(0,0,0,.1);margin:0;padding-bottom:1rem}.save-btn,.autosave-btn,.add-task-btn{padding:10px 15px;font-size:14px;border:none;cursor:pointer;border-radius:5px;transition:background-color .3s ease;background-color:#666;color:#fff}.add-task-btn{background-color:#2980b9;margin-right:auto}.add-task-btn:hover{background-color:#3498db}.save-btn:hover{background-color:#5a5a5a}.autosave-btn{background-color:#ff9800}.autosave-btn:hover{background-color:#f39c12}.task-list-wrapper{display:flex;flex-direction:column;margin-top:1rem;width:100%}.task-list{background-color:#00000080;border:1px solid rgba(0,0,0,.2);border-radius:6px;display:flex;flex-wrap:nowrap;gap:.5rem;list-style:none;margin:0;padding:.5rem;overflow-x:auto;transform:rotateX(180deg)}.task-list::-webkit-scrollbar{height:1rem;background-color:transparent}.task-list::-webkit-scrollbar-thumb{background-color:#64646499;border:2px solid transparent;border-radius:6px;background-clip:padding-box;transition:background-color .3s}.task-list::-webkit-scrollbar-thumb:hover{background-color:#505050cc;border-width:0px}.task-list-message-container{position:fixed;top:10px;left:50%;transform:translate(-50%);z-index:100;width:90%;max-width:500px}.error-message{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb;padding:10px;border-radius:4px;font-weight:700;font-size:14px;margin-bottom:10px;text-align:center;box-shadow:0 0 10px #0000001a}.action-message{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;padding:10px;border-radius:4px;font-weight:700;font-size:14px;margin-bottom:15px;text-align:center;box-shadow:0 0 10px #0000001a}.task-item{padding:15px;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 10px #0000001a;position:relative;height:min-content}.task-item:hover{box-shadow:0 6px 15px #0003}.task-item-header{display:flex;justify-content:flex-start;align-items:center;width:100%}.task-name{font-size:1.25rem;font-weight:700;color:#333}.task-date{font-size:14px;color:#777;margin-bottom:8px}.task-notes{font-size:14px;color:#666;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:5px;padding:.5rem;white-space:pre-wrap;word-wrap:break-word}.completed{background-color:#d3ffd3!important}.main-task-item{background-color:#fff;min-width:500px;transform:rotateX(180deg);margin-top:auto}.subtask-item{background-color:#f4faff;margin-top:.5rem}.subtask-item:hover{background-color:#f0f8ff}.subtask-item .task-name{font-size:1rem}.progress-container{box-sizing:border-box;width:100%;background-color:#bbb;border-radius:10px;margin-top:5px;margin-bottom:10px;height:1.5rem;position:relative}.progress-bar{height:100%;background-color:#4caf50;border-radius:8px;transition:width .3s ease-in-out}.progress-text{position:absolute;font-size:1em;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;z-index:10}.task-checkbox{margin-right:15px;width:20px;height:20px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #4caf50;border-radius:4px;background-color:#fff;transition:all .2s ease}.task-checkbox:checked{background-color:#4caf50;border-color:#4caf50;position:relative}.task-checkbox:checked:after{content:"✔";position:absolute;top:2px;left:2px;color:#fff;font-size:14px}.task-item-buttons{display:flex;justify-content:flex-end}.task-item-buttons buttons{padding:8px 16px;font-size:14px;border-radius:4px;border:1px solid transparent;cursor:pointer}.delete-btn{background-color:#ff6347b8;color:#fff;margin-left:auto;padding:.2rem .3rem;font-size:.5rem}.add-subtask-btn{background-color:#007bff;color:#fff;margin-right:auto}.add-subtask-btn:hover{background-color:#0056b3}.collapse-btn{background-color:#f0ad4e;color:#fff;padding:8px 16px}.collapse-btn:hover{background-color:#ec971f}.edit-btn{background-color:orange;color:#fff;display:flex;justify-content:center;align-items:center}.task-item .edit-form{display:flex;flex-direction:column}.task-item .edit-form input,.task-item .edit-form textarea{margin-bottom:15px}.task-item input[type=date],.task-item input[type=text],.task-item textarea{padding:8px 10px;font-size:16px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;width:100%;box-sizing:border-box}.task-item textarea{height:10rem}.onboarding-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.onboarding-box{background-color:#fff;padding:30px;border-radius:8px;max-width:450px;text-align:center;box-shadow:0 2px 12px #0000001a}.onboarding-box h2{margin-bottom:1rem}.onboarding-buttons{display:flex;justify-content:center;margin-top:20px}.onboarding-buttons button{padding:12px 24px;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.onboarding-buttons button:hover{opacity:.85}.next-btn{background-color:#4caf50}.skip-btn{background-color:#333}.instructions-section{background-color:#f9f9f9;padding:20px;border-radius:8px;margin:20px 0 0;box-shadow:0 2px 8px #0000001a}.instructions-section .collapse-btn{background-color:#007bff;color:#fff;border:none;padding:12px 20px;font-size:1.1em;cursor:pointer;border-radius:5px;margin-bottom:10px}.instructions-section .collapse-btn:hover{background-color:#0056b3}.instructions-content{margin-top:20px}.instructions-content h2{font-size:1.75em;color:#333;margin-bottom:15px}.instructions-content h3,.instructions-content h4{font-size:1.25em;color:#333;margin-top:20px;margin-bottom:15px}.instructions-content ul{list-style-type:disc;padding-left:20px;margin-bottom:20px}.instructions-content li{margin-bottom:12px;font-size:1.1em;color:#555}.instructions-content p{font-size:1.1em;color:#555;margin-bottom:20px}.fade-out{animation:fadeOut 2s forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@media (max-width: 768px){header h1{font-size:1.2rem}.onboarding-box{width:80%}.task-manager{padding:1rem 5px 0}.task-list-wrapper{padding:0}.task-list{background-color:#0000004d;padding:0;flex-direction:column;overflow:visible}.task-item{margin-bottom:0}.main-task-item{min-width:100%;margin-bottom:1rem}.task-name{font-size:1.25rem;font-weight:bolder}.task-notes{font-size:12px}.progress-container{height:1.2rem}.task-item-buttons{justify-content:space-between}.task-item-buttons button{width:45%;padding:6px}.instructions-section{padding:15px}.instructions-content h2{font-size:1.5em}.instructions-content h3,.instructions-content h4{font-size:1.1em}.instructions-content ul{padding-left:15px}.auth-container{padding:20px}.auth-container h2{font-size:1.5rem}.auth-container form input,.auth-container button{font-size:14px}}