:root{--primary:#2e7d32;--primary-dark:#1b5e20;--background:#edf6ef;--card:#ffffffd9;--text:#263238;--soft-text:#607d68}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,Arial,sans-serif}body{background:linear-gradient(135deg,#edf6ef,#dcedc8);justify-content:center;align-items:flex-start;width:100%;min-height:100vh;padding:30px 10px;display:flex;overflow-x:hidden}.header{text-align:center;margin-bottom:35px}.header h1{color:var(--primary);letter-spacing:-1px;margin-bottom:10px;font-size:42px}.header p{color:var(--soft-text);font-size:16px;line-height:1.6}.app{background:var(--card);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:2;border-radius:25px;width:100%;max-width:650px;padding:35px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000001f}.task-form{gap:12px;margin-bottom:35px;display:flex}.task-input{min-width:0;color:var(--text);background:#ffffffb3;border:1px solid #2e7d3233;border-radius:14px;outline:none;flex:1;padding:15px 18px;font-size:16px;transition:all .3s}.task-input::placeholder{color:#78909c;font-size:15px}.task-input:focus{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 0 0 4px #2e7d3226}.add-button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:14px;padding:0 25px;font-size:15px;font-weight:600;transition:all .3s}.add-button:hover{background:var(--primary-dark);transform:translateY(-3px);box-shadow:0 8px 15px #2e7d3240}.add-button:active{transform:scale(.95)}.task-list{flex-direction:column;gap:15px;list-style:none;display:flex}.task-card{background:#ffffffbf;border:1px solid #ffffff80;border-radius:18px;justify-content:space-between;align-items:center;padding:18px;transition:transform .3s,box-shadow .3s,opacity .3s;display:flex;box-shadow:0 8px 20px #00000014}.task-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px #0000001f}.task-main{align-items:center;gap:12px;display:flex}.task-checkbox{cursor:pointer;width:18px;height:18px;accent-color:var(--primary)}.task-title{color:var(--text);font-size:16px}.completed .task-title{color:#78909c;opacity:.7}.task-actions{gap:8px;display:flex}.task-actions button{cursor:pointer;border:none;border-radius:10px;padding:8px 14px;font-size:14px;transition:all .25s}.edit-btn{color:#2e7d32;background:#e8f5e9}.edit-btn:hover{background:#c8e6c9}.delete-btn{color:#c62828;background:#ffebee}.delete-btn:hover{background:#ffcdd2}.save-btn{background:var(--primary);color:#fff}.cancel-btn{color:#455a64;background:#eceff1}.edit-input{border:1px solid #ccc;border-radius:10px;outline:none;padding:10px;font-size:15px}.task-stats-wrapper{margin-bottom:25px}.task-stats{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff8c;border-radius:18px;justify-content:space-around;align-items:center;gap:20px;padding:18px;display:flex}.progress-container{background:#ffffff8c;border-radius:18px;margin-top:20px;padding:18px}.task-stats div{text-align:center}.task-stats strong{color:var(--primary);font-size:25px;display:block}.task-stats span{color:var(--soft-text);font-size:13px}.sakura-container{pointer-events:none;z-index:0;width:350px;height:100vh;position:fixed;top:0;right:0;overflow:hidden}.sakura-container span{opacity:.35;filter:blur(.2px);background:linear-gradient(135deg,#ffd6e7,#f8a8c8);border-radius:100% 0;width:18px;height:25px;animation:16s linear infinite petalFall;position:absolute;top:-50px}.sakura-container span:first-child{animation-delay:0s;right:40px}.sakura-container span:nth-child(2){animation-delay:4s;right:100px}.sakura-container span:nth-child(3){animation-delay:7s;right:180px}.sakura-container span:nth-child(4){animation-delay:2s;right:240px}.sakura-container span:nth-child(5){animation-delay:10s;right:80px}.sakura-container span:nth-child(6){animation-delay:5s;right:300px}.sakura-container span:nth-child(7){animation-delay:12s;right:150px}@keyframes petalFall{0%{transform:translateY(-10vh)rotate(0)}50%{transform:translate(40px,50vh)rotate(180deg)}to{transform:translate(-30px,110vh)rotate(360deg)}}.fade-in{animation:.4s taskAppear}@keyframes taskAppear{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.empty-state{text-align:center;width:100%;max-width:100%;color:var(--soft-text);box-sizing:border-box;padding:45px 10px;animation:.5s taskAppear;overflow:hidden}.empty-icon{margin-bottom:15px;font-size:45px}.empty-state h3{color:var(--text);margin-bottom:8px;font-size:22px}.empty-state p{font-size:15px}@media (width<=600px){.app{border-radius:20px;width:100%;padding:25px 18px}.header h1{font-size:34px}.header p{font-size:14px}.task-form{flex-direction:column;gap:12px}.task-input{width:100%}.add-button{width:100%;height:45px}.task-card{flex-direction:column;align-items:stretch;gap:15px}.task-main{width:100%}.task-title{word-break:break-word}.task-actions{justify-content:flex-end;width:100%}.task-actions button{flex:1}.empty-state{padding:35px 10px}.empty-icon{font-size:40px}.empty-state h3{font-size:20px}.empty-state p{font-size:13px}.sakura-container{width:180px}.app{overflow:hidden}.empty-state{width:100%}body{padding:20px 10px;overflow-x:hidden}.app{width:100%;max-width:100%;padding:25px 15px}.task-list{width:100%;padding:0}.task-card{width:100%;max-width:100%}.task-input,.task-input::placeholder{font-size:14px}.task-stats{gap:5px;width:100%;padding:15px 8px}.task-stats strong{font-size:22px}.task-stats span{font-size:12px}}.task-info{flex-direction:column;gap:6px;display:flex}.priority-badge{text-transform:capitalize;color:#455a64;background:#eceff1;border-radius:20px;width:fit-content;padding:4px 10px;font-size:12px;font-weight:600}.priority-badge.high{color:#c62828;background:#ffebee}.priority-badge.medium{color:#f57f17;background:#fff8e1}.priority-badge.low{color:#2e7d32;background:#e8f5e9}.search-container{width:100%;margin:20px 0}.search-input{width:100%;color:var(--text);background:#ffffffb3;border:1px solid #2e7d3233;border-radius:14px;outline:none;padding:14px 18px;font-size:15px;transition:all .3s}.search-input::placeholder{color:var(--soft-text)}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2e7d3226}.delete-all-btn{color:#fff;cursor:pointer;background:#c62828;border:none;border-radius:14px;margin-top:20px;padding:12px 20px;font-size:14px;transition:all .3s}.delete-all-btn:hover{background:#8e0000;transform:translateY(-2px)}.task-date{color:var(--soft-text);margin-top:8px;font-size:13px}.overdue-badge{color:#c62828;background:#fdecea;border-radius:999px;margin-top:6px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-block}.task-sort{align-items:center;gap:12px;margin-bottom:20px;display:flex}.task-sort label{color:var(--soft-text);font-size:14px;font-weight:600}.task-sort select{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text);background:#ffffffbf;border:none;border-radius:14px;outline:none;flex:1;padding:12px 16px;font-size:14px;transition:all .3s}.task-sort select:focus{box-shadow:0 0 0 3px #ffb7c559}.date-filter{margin-bottom:20px}.date-filter input{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:100%;color:var(--text);background:#ffffffbf;border:none;border-radius:14px;outline:none;padding:12px 16px;font-size:14px;transition:all .3s}.date-filter input:focus{box-shadow:0 0 0 3px #ffb7c559}.progress-container{flex-basis:100%}.task-status{border-radius:12px;margin-left:10px;padding:4px 8px;font-size:13px}.status-overdue{color:#d60000;background:#ffe5e5}.status-today{color:#856404;background:#fff3cd}.status-tomorrow{color:#0056b3;background:#d9ecff}.status-upcoming{color:#166534;background:#dcfce7}.progress-container{width:100%;margin-top:20px}.progress-header{justify-content:space-between;margin-bottom:8px;display:flex}.progress-bar{background:#eee;border-radius:20px;width:100%;height:12px;overflow:hidden}.progress-fill{border-radius:20px;height:100%;transition:width .4s}.progress-container p{margin-top:8px;font-size:14px}.task-filter button{cursor:pointer;background:#fff9;border:none;border-radius:20px;padding:8px 18px;transition:all .3s}.task-filter .active-filter{font-weight:700}.task-filter{justify-content:center;align-items:center;gap:12px;margin:20px 0;display:flex}.task-filter button{cursor:pointer;color:var(--text);background:#ffffffa6;border:none;border-radius:20px;padding:10px 22px;font-size:14px;transition:all .3s}.task-filter button:hover{transform:translateY(-2px)}.task-filter .active-filter{background:var(--primary);color:#fff;font-weight:600}.task-form{flex-direction:column;gap:15px;display:flex}.task-input{border-radius:18px;height:55px;padding:0 20px;font-size:16px}.priority-wrapper{gap:10px;display:flex}.priority-option{cursor:pointer;background:#fff9;border:none;border-radius:18px;flex:1;padding:10px;transition:all .3s}.priority-option:hover{transform:translateY(-3px)}.priority-option.selected{font-weight:700;transform:scale(1.05)}.priority-option.high.selected{color:#c62828;background:#ffebee}.priority-option.medium.selected{color:#f57f17;background:#fff8e1}.priority-option.low.selected{color:#2e7d32;background:#e8f5e9}.date-picker{cursor:pointer;background:#ffffffa6;border-radius:18px;align-items:center;gap:10px;padding:14px 18px;display:flex}.date-picker input{opacity:0;pointer-events:none;position:absolute}.add-button{background:linear-gradient(135deg,#43a047,#66bb6a);border-radius:18px;height:52px;font-size:16px}.search-container{position:relative}.search-icon{position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search-input{border-radius:18px;height:52px;padding-left:48px}.date-filter{width:100%;margin:20px 0}.date-filter-button{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:100%;color:var(--text);cursor:pointer;box-sizing:border-box;background:#ffffffa6;border-radius:18px;align-items:center;gap:12px;padding:14px 18px;font-size:15px;transition:all .3s;display:flex;position:relative}.date-filter-button:hover{transform:translateY(-3px);box-shadow:0 10px 20px #00000014}.calendar-icon{font-size:20px}.date-filter-button input{opacity:0;pointer-events:none;position:absolute}.clear-date{color:#c62828;cursor:pointer;background:#ffebee;border:none;border-radius:50%;width:26px;height:26px;margin-left:auto;font-size:13px}.clear-date:hover{background:#ffcdd2}
