body{background:linear-gradient(90deg,#f6a5c0,#f8d4e3);min-height:100vh;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}.app{text-align:center;padding:40px 20px}.input-section{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:30px;display:flex}.input-section input,.input-section select{color:#222;background:#ffffffb3;border:none;border-radius:12px;outline:none;padding:12px;font-size:15px}.input-section button{color:#fff;cursor:pointer;background:#ff4f93;border:none;border-radius:12px;padding:12px 22px;font-size:15px;font-weight:700;transition:all .3s;box-shadow:0 4px 10px #0003}.input-section button:hover{background:#ff2f7d;transform:scale(1.05)}.task-container{flex-direction:column;align-items:center;gap:20px;display:flex}.task-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:#fff3;border-radius:20px;width:600px;padding:25px;box-shadow:0 8px 20px #0003}.task-card h2{margin:0 0 10px}.task-card p{margin:8px 0;font-size:18px}.task-buttons{margin-top:15px}.complete-btn,.delete-btn{cursor:pointer;color:#fff;border:none;border-radius:10px;margin:5px;padding:10px 16px;font-weight:700;transition:all .3s}.complete-btn{background:#00c853}.complete-btn:hover{background:#00a844}.delete-btn{background:#ff5252}.delete-btn:hover{background:#e53935}input[type=date]{color:#222;background:#ffffffb3}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(0);cursor:pointer}@media (width<=768px){h1{font-size:48px}.input-section{flex-direction:column;align-items:center}.input-section input,.input-section select,.input-section button{width:90%}.task-card{width:90%;padding:18px}}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#f7a8d5,#f8d7e8);min-height:100vh;font-family:Arial,sans-serif;transition:background .5s}.layout{min-height:100vh;display:flex}.dark .sidebar{background:#ffffff0d;box-shadow:3px 0 20px #0006}.dark .sidebar-title{color:#ddd}.dark .filter-btn{color:#ccc;background:#ffffff14}.dark .filter-btn:hover{background:#ffffff26}.dark h1{color:#f0f0f0}.dark .task-input input,.dark .task-input select{color:#eee;background:#ffffff1a}.dark .task-input input[type=date]{color:#eee;-webkit-text-fill-color:#eee;background:#ffffff1a}.dark .search-bar input{color:#eee;background:#ffffff1a}.dark .task-card{color:#eee;background:#ffffff14}.dark .task-card p{color:#bbb}.dark .task-card h2{color:#f0f0f0}.dark .input-group label{color:#ddd}.dark .no-tasks{color:#ccc}.dark .section-title{color:#ddd}.dark .sort-btn{color:#ddd;background:#ffffff1a}.dark .edit-input,.dark .edit-select{color:#eee;background:#ffffff1a}.dark .progress-label{color:#ddd}.dark .progress-bar-bg{background:#ffffff1a}.dark .cat-input{color:#eee;background:#ffffff1a}.dark .task-card.overdue{background:#ff64641a}.dark .notes-area{color:#ddd;background:#ffffff14}.dark .diary-area{color:#eee;background:#ffffff0d;border-color:#ffffff1a}.dark .modal{color:#eee;background:#1e1e2e}.dark .modal-header h2{color:#eee}.sidebar{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#ffffff4d;flex-direction:column;gap:10px;width:230px;height:100vh;min-height:100vh;padding:40px 16px;display:flex;position:sticky;top:0;overflow-y:auto;box-shadow:3px 0 20px #0000001a}.sidebar-title{color:#fff;text-shadow:1px 1px 6px #0003;margin-bottom:2px;font-size:16px;font-weight:700}.sidebar-divider{border:none;border-top:1px solid #fff6;margin:6px 0}.filter-btn{cursor:pointer;color:#666;background:#fff6;border:none;border-radius:12px;justify-content:space-between;align-items:center;width:100%;padding:10px 14px;font-size:14px;font-weight:500;transition:all .3s;display:flex}.filter-btn:hover{background:#ffffffa6;transform:translate(3px)}.active-filter{color:#fff!important}.count-badge{background:#0000001a;border-radius:20px;padding:2px 8px;font-size:12px;font-weight:700}.active-filter .count-badge{color:#fff;background:#ffffff40}.category-row{align-items:center;gap:6px;display:flex}.category-row .filter-btn{flex:1}.delete-cat-btn{color:#fff;cursor:pointer;background:#ff5252b3;border:none;border-radius:8px;flex-shrink:0;width:26px;height:26px;font-size:12px;font-weight:700;transition:all .2s}.delete-cat-btn:hover{background:#ff5252}.add-category{gap:6px;margin-top:4px;display:flex}.cat-input{color:#555;background:#ffffff80;border:none;border-radius:10px;outline:none;flex:1;padding:8px 10px;font-size:13px}.add-cat-btn{color:#fff;cursor:pointer;border:none;border-radius:10px;width:32px;font-size:20px;font-weight:700;transition:all .2s}.add-cat-btn:hover{transform:scale(1.1)}.notes-area{color:#555;resize:vertical;background:#fff6;border:none;border-radius:12px;outline:none;width:100%;min-height:120px;padding:10px 12px;font-family:Arial,sans-serif;font-size:13px;line-height:1.5}.notes-area::placeholder{color:#aaa}.theme-grid{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:4px;display:grid}.theme-dot{cursor:pointer;border:3px solid #0000;border-radius:50%;width:28px;height:28px;transition:all .3s}.theme-dot:hover{transform:scale(1.2)}.active-theme{border:3px solid #fff;transform:scale(1.2);box-shadow:0 0 8px #0000004d}.dark-mode-btn{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff59;border:none;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;font-size:22px;transition:all .3s;display:flex;position:absolute;top:20px;right:25px;box-shadow:0 4px 15px #00000026}.dark-mode-btn:hover{transform:scale(1.1)}.dark .dark-mode-btn{background:#ffffff1a}.diary-btn{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff59;border:none;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;font-size:22px;transition:all .3s;display:flex;position:absolute;top:75px;right:25px;box-shadow:0 4px 15px #00000026}.diary-btn:hover{transform:scale(1.1)}.dark .diary-btn{background:#ffffff1a}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal{background:#fff;border-radius:24px;width:90%;max-width:550px;padding:30px;box-shadow:0 20px 60px #0003}.modal-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.modal-header h2{color:#333;font-size:24px}.modal-close{cursor:pointer;background:#0000001a;border:none;border-radius:50%;width:32px;height:32px;font-size:16px;transition:all .2s}.modal-close:hover{color:#fff;background:#ff5252}.modal-date{color:#aaa;margin-bottom:16px;font-size:13px}.diary-area{resize:none;color:#444;background:#fafafa;border:2px solid #0000001a;border-radius:16px;outline:none;width:100%;height:300px;padding:16px;font-family:Arial,sans-serif;font-size:15px;line-height:1.6;transition:border .3s}.diary-area:focus{border-color:#ff4f9a}.app{text-align:center;flex:1;padding:40px 30px;position:relative}h1{color:#fff;text-shadow:2px 2px 10px #0003;margin-bottom:20px;font-size:70px}.progress-container{width:60%;max-width:500px;margin:0 auto 35px}.progress-label{color:#fff;text-shadow:1px 1px 4px #0003;justify-content:space-between;margin-bottom:8px;font-size:14px;font-weight:700;display:flex}.progress-bar-bg{background:#ffffff59;border-radius:20px;width:100%;height:10px;overflow:hidden}.progress-bar-fill{border-radius:20px;height:100%;transition:width .5s}.task-input{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:15px;margin-bottom:30px;display:flex}.input-group{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.input-group label{color:#fff;text-shadow:1px 1px 4px #0003;padding-left:4px;font-size:13px;font-weight:700}.task-input input,.task-input select{color:#555;background:#ffffffbf;border:none;border-radius:14px;outline:none;padding:14px 16px;font-size:16px}.task-input input[type=text]{width:230px}.task-input input[type=date]{color:#555;-webkit-text-fill-color:#555;background:#ffffffbf;border:none;border-radius:14px;outline:none;padding:14px 16px;font-size:16px}.task-input button{color:#fff;cursor:pointer;border:none;border-radius:14px;padding:14px 26px;font-size:16px;font-weight:700;transition:all .3s}.task-input button:hover{transform:scale(1.05)}.toolbar{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-bottom:30px;display:flex}.search-bar input{color:#555;background:#ffffffbf;border:none;border-radius:30px;outline:none;width:300px;padding:14px 20px;font-size:16px;box-shadow:0 4px 15px #0000001a}.sort-btn{cursor:pointer;color:#555;background:#ffffffbf;border:none;border-radius:30px;padding:14px 20px;font-size:15px;font-weight:700;transition:all .3s;box-shadow:0 4px 15px #0000001a}.sort-btn:hover{transform:scale(1.03)}.section-title{color:#fff;text-shadow:1px 1px 4px #0003;margin:20px 0 15px;font-size:22px}.completed-title{opacity:.85;margin-top:10px}.completed-header{justify-content:center;align-items:center;gap:16px;margin-top:40px;display:flex}.clear-btn{color:#fff;cursor:pointer;background:#ff5252cc;border:none;border-radius:12px;padding:8px 16px;font-size:14px;font-weight:700;transition:all .2s}.clear-btn:hover{background:#ff5252;transform:scale(1.05)}.task-list{flex-direction:column;align-items:center;gap:20px;margin-bottom:20px;display:flex}.no-tasks{color:#fff;text-shadow:1px 1px 4px #00000026;margin-top:40px;font-size:20px}.task-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#333;text-align:left;background:#ffffff59;border-radius:22px;width:85%;max-width:650px;padding:25px 30px;transition:all .3s;box-shadow:0 8px 25px #0000001a}.task-card.overdue{background:#ffebeb73;border-left:4px solid #e53935}.card-header{justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;display:flex}.card-badges{flex-wrap:wrap;flex-shrink:0;gap:6px;display:flex}.category-badge{border-radius:20px;padding:4px 10px;font-size:12px;font-weight:700}.overdue-badge{color:#fff;background:#e53935;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:700}.task-card h2{font-size:20px}.task-card p{color:#555;margin-bottom:6px;font-size:15px}.high{color:#e53935;font-weight:700}.medium{color:#fb8c00;font-weight:700}.low{color:#43a047;font-weight:700}.buttons{flex-wrap:wrap;gap:12px;margin-top:18px;display:flex}.complete-btn{color:#fff;cursor:pointer;background:#00c853;border:none;border-radius:12px;padding:10px 18px;font-size:16px;transition:all .2s}.complete-btn:hover{transform:scale(1.05)}.edit-btn{color:#fff;cursor:pointer;border:none;border-radius:12px;padding:10px 18px;font-size:16px;transition:all .2s}.edit-btn:hover{transform:scale(1.05)}.delete-btn{color:#fff;cursor:pointer;background:#ff5252;border:none;border-radius:12px;padding:10px 18px;font-size:16px;transition:all .2s}.delete-btn:hover{transform:scale(1.05)}.edit-form{flex-direction:column;gap:10px;display:flex}.edit-input,.edit-select{color:#555;background:#ffffffbf;border:none;border-radius:12px;outline:none;width:100%;padding:12px 14px;font-size:16px}.save-btn{color:#fff;cursor:pointer;border:none;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:700;transition:all .2s}.save-btn:hover{transform:scale(1.05)}.cancel-btn{color:#fff;cursor:pointer;background:#aaa;border:none;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:700;transition:all .2s}.cancel-btn:hover{transform:scale(1.05)}.completed{opacity:.6}.completed h2,.completed p{text-decoration:line-through}input[type=date]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#555;-webkit-text-fill-color:#555}input[type=date]::-webkit-datetime-edit{color:#555;-webkit-text-fill-color:#555}input[type=date]::-webkit-calendar-picker-indicator{opacity:1;filter:invert(.4);cursor:pointer}@media (width<=700px){.layout{flex-direction:column}.sidebar{width:100%;min-height:unset;flex-flow:wrap;gap:8px;height:auto;padding:15px;position:static;overflow-y:visible}.sidebar-title{width:100%;margin-bottom:2px}.filter-btn{flex:1;justify-content:center;gap:6px;min-width:70px}.category-row,.add-category,.notes-area,.theme-grid,.sidebar-divider{width:100%}h1{font-size:48px}.progress-container{width:90%}.task-input{flex-direction:column;align-items:center;gap:12px}.input-group{width:90%;max-width:340px}.task-input input,.task-input select,.task-input button,.task-input input[type=date]{width:100%!important}.task-card{width:92%}.search-bar input{width:100%}.toolbar{flex-direction:column;align-items:center}.sort-btn{width:90%;max-width:340px}.dark-mode-btn{width:40px;height:40px;font-size:18px;top:15px;right:15px}.diary-btn{width:40px;height:40px;font-size:18px;top:65px;right:15px}}