*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,Arial,sans-serif}body,html{height:100%}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:40px 20px;transition:background .5s,color .5s}.app.light{background:linear-gradient(135deg,#f5f6fa,#dfe4ea);color:#333}.app.dark{background:linear-gradient(135deg,#1c1c1c,#2a2a2a);color:#fff}.header{display:flex;justify-content:space-between;align-items:center;width:400px;margin-bottom:40px}.header h1{font-size:34px;font-weight:700;letter-spacing:1px}.theme-btn{cursor:pointer;padding:8px 16px;border-radius:12px;background:#667eea;color:#fff;border:none;font-weight:700;transition:.3s;box-shadow:0 4px 8px #0003}.theme-btn:hover{background:#5563d1;transform:translateY(-2px)}.center{display:flex;flex-direction:column;align-items:center;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:35px;border-radius:20px;width:400px;box-shadow:0 20px 40px #00000026;transition:background .5s}.app.dark .center{background:#1e1e1ef2}.input-form{display:flex;gap:12px;width:100%;margin-bottom:25px}.input-form .task{flex:1;padding:12px;border-radius:12px;border:1px solid #ccc;font-size:16px;outline:none;transition:border .3s,box-shadow .3s}.input-form .task:focus{border:1px solid #667eea;box-shadow:0 4px 10px #667eea4d}.input-form .add{background:#667eea;color:#fff;border:none;padding:12px 18px;border-radius:12px;cursor:pointer;font-weight:700;transition:.3s;box-shadow:0 4px 8px #667eea4d}.input-form .add:hover{background:#5563d1;transform:translateY(-2px)}.filter-bar{display:flex;justify-content:space-around;width:100%;margin-bottom:25px}.filter-bar button{padding:8px 16px;border-radius:12px;border:none;cursor:pointer;background:#eee;transition:.3s;font-weight:700}.filter-bar button.active,.filter-bar button:hover{background:#667eea;color:#fff;box-shadow:0 4px 8px #667eea4d}.task-list{display:flex;flex-direction:column;align-items:center;width:100%}.item-list{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;margin-bottom:12px;border-radius:16px;background:#f5f6fa;width:100%;transition:.3s;box-shadow:0 4px 12px #0000000d}.app.dark .item-list{background:#2a2a2a}.item-list:hover{transform:translateY(-2px);box-shadow:0 8px 16px #00000026}.input-check{margin-right:12px;width:18px;height:18px;accent-color:#667eea}.content{flex:1;margin-left:12px;transition:.3s;font-size:16px;word-break:break-word}.completed{text-decoration:line-through;color:gray;opacity:.7}.btn-group{display:flex;gap:10px}.btn{border:none;padding:6px 10px;border-radius:12px;cursor:pointer;background:#ddd;transition:.2s;font-weight:700}.btn:hover{background:#bbb;transform:translateY(-1px)}